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Introduction 

elcome to the Adobe SiteMill'" program—site-management software for the 
1 f | ; S' : World Wide Web. With Adobe SiteMill you can create Web pages that include 
f ] graphics and forms, and automatically maintain correct links throughout your 

Web site even as it grows and changes. 

The value of the World Wide Web is in its links between pages. But links break easily. Because 
every page is linked to another page, adding, deleting, rearranging, or otherwise modifying 
pages causes a link to break. Links can break between your pages and pages on other Web 
servers over which you have no control. A broken link frustrates readers and reflects poorly 
on the Web site containing it. Unfortunately, links are one of the most tedious and error- 
prone site-management chores to perform manually. Adobe SiteMill automates the process 
of checking for and correcting broken links, saving you a significant amount of time. It sum¬ 
marizes errors in a convenient list, and provides drag-and-drop linking features that let you 
correct links quickly and accurately, and in most cases, without having to type a URL. 

In addition, Adobe SiteMill includes a complete Web-page authoring environment where you 
can build and preview text, images, and links on a Web page. You can drag and drop text, 
images, form objects, and links directly onto a Web page, and apply standard HTML formats 
and styles to text without typing any HTML code. 

Before using Adobe SiteMill, you should have a working knowledge of the Macintosh' and its 
operating conventions. You should know how to use the mouse and standard Macintosh 
menus and commands. You should also know how to open, save, and close files. If you need 
to review these techniques, see your Macintosh user guide. 

ABOUT THIS GUIDE 

The Adobe SiteMill User Guide provides detailed information about Adobe SiteMill tools and 
commands. It is designed to be a reference tool in your everyday work with Adobe SiteMill. 
This guide also includes a hands-on tutorial to give you familiarity with the features in 
Adobe SiteMill. 





The Adobe SiteMiU User Guide is organized according to the tasks you most commonly 
perform when creating and managing a Web site: 

Chapter 1 is a tutorial which includes two sections. Part 1 presents step-by-step instructions 
for creating Web pages, and Part 2 presents instructions for maintaining a Web site. If you are 
upgrading from Adobe PageMilT, you may skip Part 1. Before you begin the tutorial, you 
might want to read Chapter 2, “Basic Concepts,” to familiarize yourself with Adobe SiteMill 
concepts and terminology. 

Chapter 2 presents fundamental concepts you’ll use in your work with Adobe SiteMill, 
and provides an orientation to the primary parts of the user interface. 

Chapter 3 explains how to add text and images to a Web page. This chapter includes informa¬ 
tion on applying paragraph formats and character styles to text, and how to import an image 
and make its background transparent. 

Chapter 4 describes how to use links from text and images to other pages or Web resources, 
and describes how to create an imagemap. 

Chapter 5 explains how to create a form on a Web page. This chapter includes information 
about form controls and text-entry fields, and Submit and Reset buttons. 

Chapter 6 covers Web site management, and finding and correcting link errors to pages 
within your site and on other Web servers. This chapter also includes information on 
uploading your site to a Web server. 

Appendix A is a troubleshooting section that may help you solve problems you may 
encounter when working with Adobe SiteMill. 

Appendix B is a guide to additional information about the World Wide Web and HTML. 
Appendix C is a quick reference for keyboard shortcuts that are not listed on the menus. 


ADOBE SITEMILL PACKAGE CONTENTS 

The Adobe SiteMill package includes two disks, the Adobe SiteMill User Guide, and a 
registration card. 

SYSTEM REQUIREMENTS 

Adobe SiteMill requires a Macintosh or Power Macintosh running System 7 or later, 

3.5 megabytes (MB) of unused RAM, 5 MB of unused hard disk space, and a 4-bit display 
or higher. Dragging and dropping between Adobe SiteMill and other applications requires 
System 7 Pro or later. 

REGISTRATION 

We are confident you will find that Adobe SiteMill greatly increases your productivity. 

So that we can continue to provide you with the highest quality software, offer technical 
support, and keep you informed about new Adobe SiteMill developments, please return the 
enclosed registration card. 

INSTALLING ADOBE SITEMILL 

To use Adobe SiteMill you must first install it on your hard disk. 

To install Adobe SiteMill: 

1 Turn off or remove any virus-protection software, and then restart your Macintosh. 

2 Insert the Installer Disk into your floppy disk drive. 

3 Double-click the Install Adobe SiteMill icon on the Installer Disk. 

4 When the opening screen appears, click Continue. 

5 From the pop-up menu, choose Easy Install to install the appropriate version of 
Adobe SiteMill for your particular Macintosh, or choose Custom Install to select from 
the following options: 

• Install the universal version of Adobe SiteMill if you plan to use the program on different 
types of Macintosh computers. 

• Install either the 68K or Power Macintosh version of Adobe SiteMill it you plan to use the 
program on your computer only. 
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6 Select a location for the installation. 

7 Click Install. When installation is complete, a message appears indicating that the 
installation was successful. 

8 Click Quit for to exit the installer. 

9 Turn on or replace any virus-protection software that you turned off in step 1. 

10 Restart your Macintosh. 


Chapter 1: Tutorial 



his first Chapter is a two-part tutorial that leads you through basic Adobe SiteMill 
authoring and site management techniques. When you complete both parts of the 
tutorial, you’ll be able to start creating Web pages and managing your own Web site. 

A small Web site is included with Adobe SiteMill so that you have files to work with through 
this tutorial; the site is stored in a folder called EarthAndWareTutorial within your 
Adobe SiteMill folder. 

Note: We recommend that you make a back-up copy of the EarthAndWareTutorial folder before 
you begin (to do this, select the folder in the Finder, and then choose File > Duplicate). That way 
you are free to make changes to the tutorial practice files, and still allow the tutorial to be 
completed again later if necessary. 

PART 1: CREATE WEB PAGES 

In Part 1, you’ll work with three pages: EWHome.html, EWPIants.html, and EWOrder.html. 
You’ll also use graphics stored in the Images folder. Additional Hypertext Markup Language 
(HTML) documents are stored in the PlantsCatalog folder within the EarthAndWareTutorial 
folder, and you’ll use these documents in Part 2 of the tutorial. 

OPEN A PAGE AND EXPLORE LINKS 

In Adobe SiteMill you can create new pages from scratch, or you can open an existing page 
generated from any application that saves or exports in the HTML format. You’ll begin by 
opening a page we’ve already started for you. 

1 Start Adobe SiteMill. 

2 Chose File > Open. 

3 Use the standard file dialog box to open the EWHome.html document. The file is stored in 
the EarthAndWareTutorial folder. 




The document looks the same as when you view it in a Web browser. By default, existing 
documents are opened in Preview mode. Preview mode allows you to follow links within 
your site. 



4 Move the pointer over the underlined text “Order Form” near the top of the page. 
The underline indicates the text is linked. 



As you move the pointer within the Adobe SiteMill window, notice how it changes to a point¬ 
ing hand when passed over the link. Also notice that the address of the link, otherwise known 
as a URL (Uniform Resource Locator) appears in the Link Location Bar at the bottom of the 
page as the pointer passes over the link. 
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5 Click the linked text. 

The destination page—EWOrder.html— appears in a new window, stacked on the original 
page which becomes inactive. When you click links, a new window opens for each page, 
making it easy for you to edit several pages simultaneously. 

6 In the EWOrder.html window, click the underlined text “Home” near the top of the page. 
The text is linked back to the EWHome.html document. 

The EWHome.html window becomes active. 

CHANGE TO EDIT MODE 

Adobe SiteMill has two modes: Preview and Edit. The current mode is indicated by the 
button in the upper right corner of the window. 

• The globe icon at the upper right of the page indicates that you are in Preview mode. As 
you just saw, Preview mode simulates how the page looks and behaves when viewed in a Web 
browser. Existing pages always open in Preview mode. 

• The pen-and-paper icon indicates you are in Edit mode. In Edit mode you can create or 
modify the content and design of the page—enter and edit text, manipulate images, create 
links, and so on, as described in the following sections. 

Click the globe to change to Edit mode. 

EDIT AND FORMAT TEXT 

Working with text in Adobe SiteMill is similar to using a word processor. However, if 
you are unfamiliar with the limitations and conventions of HTML text formatting, be 
sure to read Chapter 3, “Adding Text and Images.” Here you’ll make basic text edits and 
formatting changes. 

1 Near the top of the EWHome.html window, select the sentence “Welcome to our 
online catalog.” 
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2 Choose Style > Italic. 


[Plants I Tools I Accessories I ] 

Welcome to ouroiifiw catalog. Nov yon can order any item in stock by 
nsing our nev interactive Order Form . 


3 Double-click the word “Accessories” to select it, and then type the text More. 

4 Triple-click the linked text “Order Form” to select the entire link. 

Note that triple-clicking unlinked text selects the entire line, while triple-clicking linked text 
selects only the underlined (linked) characters. This is a handy feature when you want to 
work with the link itself, as you will do here. 

5 With the text still selected, press Option, drag the text toward the end of the first paragraph, 
and drop it when the insertion point appears immediately to the left of the closing bracket. 

[Plants I Tools I More ij 

MWcorno to ourottHna catalog. Nov you. can order aky item in stock by 
using our nev interactive Order Form . 


In Adobe SiteMill Edit mode, you can quickly duplicate selected text, graphics, and other 
objects by pressing Option as you drag the selection to a different location on the same page. 
However, when you drag an item from one page to another, a copy of the item appears auto¬ 
matically in the new location, and you do not have to press Option. 


USE THE PASTEBOARD 

Adobe SiteMill includes a storage area called the Pasteboard. Similar to the Clipboard, the 
Adobe SiteMill Pasteboard can store linked elements as well as unlinked elements; this lets 
you reuse a linked element throughout a Web site without having to relink the item each time, 
or keep an entire page open simply to copy its elements. Also, the Adobe SiteMill Pasteboard 
can store multiple elements on each of the five “pages” in the Pasteboard. 

Now you’ll move the line of text you just edited to the Pasteboard so you can use it as a 
standard element on other pages. 



2 Choose Window > Show Pasteboard. To open the Pasteboard window. 

3 Resize the Pasteboard so it is wider than it is long. This step will let you view the text you 
are about to store there. 

4 Drag the selected text in the EWHome.html window onto the center of the Pasteboard, and 
then close the Pasteboard window. 

The text appears in the Pasteboard, ready to be inserted onto another page. Notice that the 
linked text remains linked. 


INSERT AND MANIPULATE IMAGES 


Working with images is as easy as working with text. You can insert, move, and resize images 
in Adobe SiteMill, and even change some aspects of how they display on-screen. 

1 Click just above the [Plants I Tools I More I Order Form] line to position the 
insertion point. 



2 Click the Insert Image button. 

3 In the dialog box that appears, go to the Images folder within the EarthAndWareTutorial 
folder, and double-click HomeLogo.gif. 



4 Click the Center Align Text button. The line of text in which the image is inserted becomes 
centered on the page, and the image moves to the middle of the page. 


5 Click the image to select it, and drag one of the selection handles to make the image smaller. 
(You can proportionally scale the image by holding down the Shift key and dragging the 
corner handle.) 


eartfvStamre 





[Plants I Tools I More I Order Form] 

Welcome to our online catalog. Nov yon can order any item in stock by 
nsing oar nev interactive Order Form . 


1 Triple-click any unlinked text in the “[Plants I Tools I More I Order Form]” paragraph to 
select the entire line of text. 






To make the image blend in with the page, you can give it a transparent background. 
To do this, you use the image-editing window. 

6 Double-click the image to open the image view window. 

7 Click the transparency tool and click the white section of the image. 

The background turns to the same color as the page background. 




Original background Transparency applied 


8 Save your changes to the image by choosing File > Save, and then close the image window 
by choosing File > Close. 

Now you’ll insert one more image onto the document, which you’ll use in the next section 
when you create a page background. 

9 Click below the bottommost graphic on the page to position the insertion point. 

10 Click the Insert Image button, and double-click the file Floral.gif in the Insert Image 
dialog box. When the image appears on the page, scroll if necessary to view the entire image. 

Note: If you are running System 7.5 or later (or System 7.1 or later with Drag Manager installed), 
you can drag and drop text and images onto a Adobe SiteMill page directly from the Finder or 
from any other application that supports Drag Manager. 

Now that you’ve learned how to work with text and images in Adobe SiteMill, you’ll learn how 
to change attributes of the page itself. 


CHANGE THE TEXT COLOR AND PAGE BACKGROUND 

You use the Adobe SiteMill Attributes Inspector to specify attributes associated with 
the entire page, selected text, or a selected object (such as an image, a horizontal rule, 
or a form element). 


1 Choose Window > Show Attributes Inspector. 

2 Display the page attributes by clicking the Page button. 


TIP: You can easily 
reuse links already 
established in other 
sites on the Web. 
Simply copy the link 
to the Clipboard. 
One way is to use 
the Copy This Link 
Location feature in 
Netscape 1.1 
or later. 



Background image well 


3 Choose Text > Custom, select a color from the color picker dialog box, and press Return. 
(For legibility, specify a dark color.) 

4 In the EWHome.html window, select the image (Floral.gif) you inserted at the bottom 
of the page. 



5 Drag the image onto the Background Image Well in the Attributes Inspector. 

The image is repeated, or tiled, to become the page background. 

6 With the image still selected on the home page, press Delete or choose Edit > Clear to delete 
the image. 

7 Click the close box in the Attributes Inspector. 














CREATE LINKS 


A link takes you from one page (the source) to another (the destination). The destination 
can be on the same page in your Web site, another page in your Web site, or somewhere else 
on the Web. 

Adobe SiteMill offers a variety of ways to insert links on a page. In this section of the tutorial, 
you’ll specify links in ways appropriate when creating Web pages. Part 2 of the tutorial 
will show how to create links when working with an existing Web site loaded into Site Mill. 
You can also read Chapter 4, “Creating Links” for more information about links. 

Create a link by using the document page icon 

All saved Adobe SiteMill pages have a page icon available in the upper-left corner of the 
document window. You can drag and drop this icon onto a selected element to link 
the element to the page. 

1 At the top of the EWHome.html page (you might need to scroll to bring the top of the page 
into view), select the text “Plants” in the first line of text in the document. 

You will create a link from this text to the document it to which refers. 

2 Choose File > Open, navigate back up to the EarthandWareTutorial folder, and double¬ 
click the file EWPlants.html. 

Reposition the EWPlants.html and EWHome.html windows side-by-side so both pages 
are visible. 

3 Drag the page icon located in the upper-left corner of the EWPlants.html window onto the 
selected text in the EWHome.html window. 



The selected text becomes underlined, indicating that it is linked. You’ll test the link in 
a minute. First, you’ll try two other methods of linking. 


1 


Create a link by copying an existing link 

You can drag any linked text or graphic to another page (or to another place on the same 
page) to copy the link to the new position. You don’t need to respecify the link, and you can 
even modify the copy without breaking the link. In this step you’ll copy the link you placed 
onto the Pasteboard earlier. 



1 Click the globe icon in the EWPlants.html window to switch to Edit mode. 

2 Choose Window > Pasteboard. 


3 Press Option, and drag the text item from the Pasteboard to the EWPlants.html window. 
When the insertion point appears in the space immediately above the circular EarthAndWare 
logo, drop the text into position. 



(Plants I Took I More i Order Form' 


An alternative is to drag the same paragraph directly from the EWHome.html window 
(or even use the conventional copy and paste method)—you don’t need to use the Pasteboard 
to copy links. The Pasteboard just gives you the freedom to copy the text into other pages 
without having the source of the link (in this case, the EWHome.html document) open at 
all times. 


Now you’ll use another method of linking, in which you type the link’s address or 
Uniform Resource Locator (URL). 


Create a link by typing the URL 

Although you’ll establish a link from the Plants page back to the EWHome page in the follow¬ 
ing procedure, note that this method of linking is best for linking to a page which resides at 
an external Web site. In fact, it is the only way to link to a page when all you have is its address. 




1 In the EWPlants.html window, select the text “Plants” in the paragraph you just inserted 
from the Pasteboard, and type Home. 

2 Double-click the text “Home” to select it. 

3 Click in the Location Bar at the bottom of the window, type EWHome.html, which is the 
address of the link in this case, and press Return. 



Once again, the selected text becomes a link. 

4 Save and then close the EWPlants.html window. 

Test the links you've created 

You can quickly double-check your work by switching into Preview mode and following the 
links you created. 


1 In the EWHome.html window, click the pen-and-paper icon to switch to Preview mode. 

2 Click the text “Plants” in the first line of text in the EWHome.html window. 

The EWPlants.html window becomes active. 


3 In the EWPlants.html window, dick the linked text “Order Form” near the top of the page. 
The EWOrder.html window becomes active. 

4 In the EWOrder.html window, click the linked text “Home” near the top of the page. 

5 When the EWHome.html window appears, save and then close the document. 

6 Choose Window > EWPlants, and then save and close the document so that only the 
EWOrder.html window remains open. 

Note: You can edit linked text without breaking the link. If you need to remove the link 
for any reason , select the text and choose Edit > Remove Link. 

CREATE A FORM 

There are two parts to creating an interactive form for the Web: laying out the form elements 
and preparing a script to collect the information in the form. Adobe SiteMill helps you with 
the form layout, but you’ll need programming assistance to prepare the script. For more 
information, see Chapter 5, “Creating Forms.” 

Here again you’ll start with an existing page; then add the form elements the page 
requires for completion. 

Add a rule and format text 

Now you’ll add a new section to the order form you opened earlier. Before adding the form 
elements, you’ll insert a horizontal line, or rule, to divide this section from other sections of 
the form, and then specify new text formatting. Note that a horizontal rule is useful in many 
kinds of page designs, not just in forms. 

1 In the EWOrder.html window, click the globe icon to switch to Edit mode. 

2 Click to the right of the closing bracket in the first paragraph near the top of the page, 
and press Return. 
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3 Click the Insert Horizontal Rule button. 


OvdkpPomv 


[ Home I Plants I Tools I More I Frnits I Vegetables I Herbs] 


VEGETABLE SEEDS: 

Artichokes, beetroot, broccoli, cabbages, carrots, chicoiy 



A horizontal line appears. You can adjust the length or width of rules, but for now the default 
settings are fine. 

4 Press Return, and then click the Left Text Align button. The insertion point moves to the 
left edge of the window. 

5 Choose Format > Indent Right. 


Now the paragraph you type, and each paragraph you create by pressing Return, will retain 
the indent and alignment settings you just specified. 


Insert, duplicate, and edit text fields 

In this section you’ll create a new section of the form where customers can type in basic 
mailing information. 

1 At the insertion point you selected in the previous step, type the text field labels shown 
here, pressing Return after each label to move to a new line. 


Name 

Address 

City 

State/Pnmnce 
Postal code 

Credit Card # 
Expiration Date 

Method of Payment 



2 Click immediately after “Name” and then click the Insert Text Field button on the 
button bar. 


This adds a one-line fill-in text field. 

3 Select the text field, press Option, and drag the field to the right of the Address label. 

4 Repeat step 3 for the remaining labels you typed earlier (but do not add a text field to the 
Method of Payment label). 

5 Resize each field as needed by selecting it and dragging the selection handle to the left. 

In the next steps you’ll add explanatory text to one of the fields. 

6 Double-click the Credit Card # text field. 

Make sure a gray bar now surrounds the field. The gray bar indicates that you can type in the 
text field. Remember that a single click selects the text field for resizing, while a double-click 
enables you to type inside it. 

7 Type Enter unless paying by check. 


Credit Cud / 1 Enter unless peyirq by cheek | 
Krpiietioa Date 1 


8 To stop editing in the text field and to prepare for the next section, click to the right of the 
"Method of Payment” text. 



Add a radio button group 

Adobe SiteMill lets you add radio buttons to a form. You can use a radio button individually 
or as part of a group. When you want to offer a set of choices from which only one can be 
selected at a time, you should use radio buttons as a group, because selecting one radio button 
automatically deselects the other options in the group. You’ll use radio buttons to create the 
Method of Payment option in the order form. 

1 With the insertion point to the right of Method of Payment, click the 
Insert Radio Button button. 


To make sure the buttons are grouped, you must copy the button you just inserted, 
rather than insert a new button for each new button in the group. 






2 Select the original radio button, press Option, drag to the right and drop the duplicate 
button beside the original 

3 Repeat step 2 so that three buttons appear on the same line. 



4 Click between the first and second buttons, and at the insertion point type 
EW Credit Card. 

5 Click between the second and third buttons, and type Standard Credit Card. 

6 Click to the right of the third button, and type Check. 



7 Click the pen-and-paper icon to switch to Preview mode to see how the form works so far. 

You can try typing in the text fields, and selecting a radio button. In the text fields, notice that 
you can type beyond the width of the field. Also notice that selecting one radio button auto¬ 
matically deselects the previously selected one. 

Add a checkbox and a pop-up menu 

The last section of the form is almost complete, but the form elements for the Vegetables 
section is missing. You’ll add the elements now and then edit them. 


1 Switch to Edit mode. 


2 Click at the end of the line that lists vegetables (after the word “chicory”) and press Return 
to create a new paragraph. 

In this new paragraph you’ll recreate the arrangement of form elements used for the Fruit and 
Herbs sections immediately below, 

3 Click the Insert Checkbox button. 

Customers will check this box to include an order of vegetable seeds. 

4 Click the Insert Text Field button. 

Customers will type the kind of seed here. 

5 Click the Insert Pop-up button. 

Next you’ll edit this new pop-up menu to include price and quantity options. 

6 Double-click the pop-up to edit it. 

7 Choose Edit > Select All, and type the following (pressing Return to start each new line): 



8 Set the default option by carefully dragging the triangle next to the list beside any of the 
price/quantity figures. Click outside the pop-up to see the new default. 

Now you can quickly duplicate this section of the form to allow customers to order more than 
one kind of vegetable seed. 

9 Press Shift, and select the check box, text field, and pop-up menu. You can also drag-select 
the elements. 

10 Press Option, drag the selected form element down to the next line, and when the inser¬ 
tion point appears, release the mouse button to drop the duplicate elements into place. 

11 Test the form by changing to Preview mode and checking how the new fields work, and 
then choose File > Close. When prompted to save changes, click Save. 

The form is complete. You’ll find more information about forms and collecting data in 
Chapter 5, “Working with Forms.” 







PART 2: MANAGING A WEB SITE 

In the first part of the tutorial you learned to create a working Web site. This section explains 
the tasks involved in maintaining a site (most importantly, keeping its links intact), as 
you revise its content and structure. Whether you add or update HTML pages within the site, 
create new graphics or update existing ones, or add or revise links to and from files within 
the site or elsewhere on the Web, Adobe SiteMill manages your revisions automatically. 

Adobe SiteMill frees you to focus on improving the quality of your site’s content and design, , 

rather than spending your time updating links. 

LOAD AND VIEW FILES IN A WEB SITE 

In this first procedure you’ll load the entire EarthAndWare Web site. We have intentionally ; 

broken the links to certain files in the site, so that you can see how Adobe SiteMill detects the , 

broken links and lets you restore them quickly and easily. 

1 In Adobe SiteMill, choose Site > Load Site. 

2 In the Load Site dialog box, select the EarthandWareTutorial folder in the list box, 1 

and click Select. [ 

Two new windows appear: Errors, and EarthandWareTutorial. 

The Site > Load Site command lets you view all the files you’ve specified as part of your 

Web site, track ail the links you’ve set up between the files, and quickly edit the links or the 1 

files in all the ways you learned in the first part of the tutorial, and in some new ways as well. 

The windows that become available when you load a site are called the Site view. ! 

1 

i 




2 


3 Choose Windows > Tile to view both Site view windows clearly. 



Adobe SiteMill identifies missing links in the Errors window as soon as the site is loaded. The 
errors detected at this point are the result of using the Macintosh Finder to move three HTML 
documents into the PlantsCatalog folder after the links had been established to and from 
those documents. (If you use Adobe SiteMill, rather than the Finder to move files, the links 
are redirected automatically.) Several graphics stored in the Images folder are placed on the 
HTML pages we moved; since these pages have been assigned a new location, however, the 
graphics aren’t available. For nowyou’U ignore the errors and explore the pages you are famil¬ 
iar with from the first part of this tutorial. 


4 In the EarthandWareTutorial window, click the Triangle icon beside the PlantsCatalog 
folder to view the three HTML files that we moved using the Finder. 

5 Click the Triangle icon beside the Images folder to view graphics associated with the site. 

You can double-click any image to make changes to it in the image view window. The changes 
you make, when saved, appear in every instance of the image in all documents that link 
to it. But for now you’ll focus on the links between documents. 


VIEW LINK STATUS INFORMATION 

The Incoming Links button beside a file in your site indicates that the file is being referenced 
by another file in the site. Conversely, the Outgoing Links button appears beside any file that 
links to one or more files. A red “X” icon indicates that no links exist. 






1 Click the Incoming Links button beside the file Logo.gif in the Image folder. 

A list of files that refer to the graphic appears. After you fix broken links, you’ll see that this 
list expands to include more HTML documents. 
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2 Click the Incoming Links button beside the EWHome.html file to view the list of pages that 
link back to this one. 


Currently the list includes the link you created from the EWPlants.html document earlier in 
the tutorial, and a link from the EWOrder.html file. 



3 Click the Outgoing Links button beside the EWHome.html file to view the pages and 
graphics that the EWHome page links to. 




The page links to several files, including the EWPlants.html file (the link you specified) and 
the images you inserted onto that page. 

Now you’ll see how Adobe SiteMill identifies broken links. 

4 Click the Outgoing Links button beside the Fruits.html file (in the PlantsCatalog section of 
the site). Note that a red question mark appears next to the file names. Because the page was 
moved (with the Finder) after the link was created, the links to the graphics are out of date. 



The two other HTML documents in the PlantsCatalog folder (Herbs.html and Vegeta- 
bles.html) also refer to the images Logo.gif and Gradient.gif, as you can see if you click the 
Outgoing Link button next to those HTML files. 

REESTABLISH BROKEN LINKS 

The following actions can break a link: 

• Deleting a linked file 

• Using the Finder (or any application other than Adobe SiteMill) to move or rename 
a linked file after the link has been established. (When you move or rename a linked file 
with Adobe SiteMill rather than the Finder, the link is redirected automatically and does 
not break.) 

• Mistyping the name or URL address when specifying the link (or pasting an incorrectly 
typed filename or URL). To avoid this kind of error, use Adobe SiteMill’s drag-and-drop 
method of linking where possible, rather than typing. 

Adobe SiteMill can help you detect and fix all links broken in these ways, as you’ll learn in this 
section. There are a number of ways to repair a link, but here you’ll use the Errors window to 
fix them, since the Errors window lists all broken links in the loaded site, and automatically 
updates when a link has been repaired. 

1 Make sure the contents of the Errors window and the EarthAndWareTutorial window are 
both clearly visible. You can resize windows and overlap them as necessary. 

2 In the EarthAndWare Images folder, select the file Gradient.gif. 
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3 Drag the selected image to the Errors window, position the pointer over the Gradient.gif 
file listed there, and when the file icon becomes selected, release the mouse button. 
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4 An alert message appears asking you to confirm that you want to make the change. Note 
that the message refers to changing three files. That’s because the image appears in the 
PlantsCatalog files Fruit.html, Herbs.html, and Vegetables.html. Click OK to make the 
required changes. 

Now that the image has been located and the link to it restored, the error message disappears 
from the Errors window. 

5 In the Errors window, double-click the Logo.gif icon. 

6 When the Locate Missing File dialog box appears, navigate to the Images folder, and 
double-click Logo.gif. Click OK to accept the changes. 

The error message in the Errors window disappears. This accomplishes the same task you just 
completed with the Gradient.gif file. 

7 Locate the remaining missing graphics using either of the two methods described above. 
When the error messages are eliminated, close the Errors window. 

8 In the EarthAndWare window, click the Outgoing Links button for the Fruit.html, 
Herbs.html, and Vegetables.html documents to see that the images are no longer identified 
as missing. 

9 In the Images folder within the EarthAndWare window, click the Incoming Links 
button beside any of the images you located in this procedure. Verify that Adobe SiteMill 
now includes the relocated PlantsCatalog files among the list of files referring to the 
selected image. Then, click the triangle icon by the Image folder to close the folder. 


RENAME AND MOVE FILES WITH ADOBE SITEMILL 

Although reestablishing broken links is easy, it is best to avoid the circumstance entirely. 
Now you’ll use Adobe SiteMill, rather than the Finder, to move and rename files, 
and see that links update automatically. 

1 In the EarthandWareTutorial window, drag the file EWPlants.html into the 
PlantsCatalog folder. 

Adobe SiteMill updates all instances of the document pathname (which defines the file’s 
location) throughout your site. 

2 Rename the file EWPlantsIntro.html. 



Although steps 1 and 2 involved the kind of changes you make frequently in the Finder, 
remember that the Finder, unlike Adobe SiteMill, cannot update the links to and from the 
documents you move or rename. Because you made the changes using Adobe SiteMill, you’ll 
see that the links to and from other documents have remained intact. 

3 Click the Incoming Links button beside the EWHome.html file. It refers to the 
EWPlantsIntro.html document correctly. 




4 Select EWPlantsIntro.html from the menu you displayed in step 3. Notice that the page has 
up-to-date links to images and to other pages despite its new name and location. If the links 
were out of date, the images on the page would be replaced by a question mark icon. 











ADD LINKS WHILE A SITE IS LOADED 


As a site grows with new content or develops more expansive links, you might find that 
adding links while in Site view is preferable to creating links in the ways you learned in 
Part 1 of the tutorial. The following procedure shows just some of the methods you can 
use to link to and from documents while a Web site is loaded. 

1 In the EWPlantsIntro.html window, click the globe icon to switch from Preview mode 
to Edit mode. You need to be in Edit mode to add more links to the file. 

2 Select the text “Vegetables” near the center of the EWPlantsIntro.html window. 

3 From the EarthAndWareTutorial window, drag the page icon for the (unopened) 
Vegetables.html page to the EWPlantsIntro.html document window, and drop it on 
the selected text. 



The selected text becomes a link to the Vegetables.html page. 

4 Repeat steps 2 and 3, only each time select a different unlinked text item on the 
EWPlantsIntro.html page (at this point, “Fruit” and “Herbs” remain unlinked), and 
drop the corresponding HTML page icon (Fruit.html and Herbs.html) from the 
EarthAndWareTutorial window onto the selected text. 

5 In the EWPlantsIntro.html window, click the pen-and-paper icon to switch back to 
Preview mode. Now you can test the links you just created. 

6 Click the linked text “Vegetables.” 


7 When the Vegetables.html window opens, click the globe icon to switch to 
Edit mode. 

8 Drag the EWOrder.html icon toward the top line of text in the Vegetables.html page, and 
when an insertion point appears immediately to the left of the closing bracket, release the 
mouse button. 



Notice that the page title appears (Order Form), not the filename (EWOrder.html). 

The text is linked automatically back to the order form you completed earlier. 

From this point on you can use the skills you’ve learned to complete the links between 
documents in the EarthAndWare Web site. For more information on maintaining a site, 
see Chapter 6, “Uploading and Maintaining Your Web Site". 



Chapter 2: Basic Concepts 


j lie Internet’s World Wide Well (the Web) is an increasingly popular medium for 
i ' l | distributing and viewing information in the form of pages of text and graphics. 

! This chapter introduces the concepts, terminology, and process you use to create 
and maintain Web pages in Adobe SiteMill. 

What makes the World Wide Web significant is not simply its collection of individual pages, 
but the links and relationships between those pages. However, most applications that create 
Web pages handle only the creation and editing of individual pages. In Adobe SiteMill, 
you can create and edit Web pages and also maintain the integrity of links throughout a group 
of pages, even as the links change. 

WHAT IS A WEB SITE? 

On the World Wide Web, a site is a group of related pages that reside together on a Web server. 
When you edit your Web site on your computer with Adobe SiteMill, your site exists as a 
group of Web pages inside a folder on a volume mounted on your computer. The site folder 
can contain images and subfolders containing more folders, images, and Web pages. 

With Adobe SiteMill, you can prepare and maintain a site on a computer away from the Web 
server, such as on your home computer or laptop, and then upload, or send a copy of, the site 
to the Web server where it will be published electronically to the world. If the Web server is a 
Macintosh and you have file access to it, you can use Adobe SiteMill to work on a site directly 
on the server. 

CREATING WEB PAGES VISUALLY 

Every page on the World Wide Web is described using the Hypertext Markup Language 
(HTML). Many other applications for designing Web pages require you to learn the actual 
HTML codes that format the text and graphics on a page. Adobe SiteMill lets you create pages 
without typing any codes. You can format text by choosing formats from menus, and you can 
import, resize, and reposition graphics on the page simply by dragging them. 

If you want to, you can enter custom HTML code into Adobe SiteMill when, for example, you 
want to add a feature or special effect not directly supported by this version of Adobe SiteMill, 
such as flashing text or a table. 
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UNDERSTANDING WEB PAGE DESIGN ISSUES 

Your options for page design are much different for a Web page than for the printed page. 

If you’re new to designing Web pages, you’ll need to get to know the capabilities of HTML. 
Even though you do not have to enter HTML code to create a Web page, the capabilities of 
HTML determine what you are able to present on a Web page. A technical note containing 
the HTML tags Adobe SiteMill supports is available on the Adobe Systems Web site at 
http://www.adobe.com/Support/, or through the Adobe FaxYI service at 206-628-5737. 

Depending on the kind of pages you want to design, HTML may expand or limit your design 
options. The following is an overview of the differences between designing for the printed 
page and for a World Wide Web page. 

Layout considerations 

HTML is primarily a set of tags for a sequence of text and graphics, with hypertext links. It 
was not designed as a full page-description language. An HTML page is essentially one col¬ 
umn of continuous text with graphics that flow along with the text, as if they were text char¬ 
acters themselves. This text-stream model limits control over page layout. For example, in 
HTML version 2.0, you cannot set up layouts that use multiple columns, layered text and 
graphics, or rotated text. 


You cannot control the size of the page and the width of the text column, because the 
page proportions and line breaks can vary depending on the size of the monitor or window 
in which the page is viewed, and with the size of the font the reader chooses in a Web browser. 
However, as a rough guideline, you might design for the line length produced by a Web 
browser using a default font on a 640x480-pixel screen. 




M-hrl -i t—lad r-~f ; JJt: .{q 






.•iSS.- ,__ 












• 

W4au»(umoBT»iiEtai| 

A 



X 

X 



\| 


Resizing a browser window changes line endings 


Because graphics are part of the text stream in HTML, you cannot specify a precise horizontal 
and vertical position for a graphic.-For example, if you position a graphic at the bottom right 
of a page as it appears on your monitor and a reader decides to make the window narrower, 
the graphic will probably move to the next line down and may end up on the left side of 
the page. 
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Typographical considerations 

You cannot set type specifications that affect typographical density using HTML, because line 
breaks, letter spacing, and word spacing are completely determined by the size of the window 
and the font settings in a Web browser. In addition, the following type characteristics are 
either completely controlled or not supported by World Wide Web browsers and cannot be 
specified from within Adobe SiteMill or imported from other applications: 

• Font, type size, and leading 

• Font width 

• Tracking 

• Strikethru, outline, shadow, reverse, superscript, and subscript type styles 

• Tab positions 

• Spacing before or after a paragraph 

If you want to preserve the typography in a short passage of text, such as a company logo, 
create the text in an image-processing program and import it as an image. However, text 
saved as an image takes much longer to download than plain text. For more information, 
see “Adding images” on page 52. 

Structuring a page around HTML formats 

Although the constraints of HTML may seem to be limitations from the point of view of a 
printed-page designer, they are intended as advantages for online delivery. The goal of HTML 
is to make Web pages readable on a wide variety of computer systems and monitor sizes. The 
HTML approach to this goal specifies the informational structure of a page separately from 
its appearance. The page author creates the structure, and the reader specifies the appearance. 

HTML structures information using named formats. You apply formats based on the 
function of a particular piece of text, such as a heading, a regular paragraph, or a list. 

HTML formats are similar to the named styles in many word-processing programs in that the 
author can change the appearance of text by applying them. However, the appearance of a 
format might also be changed by a person reading a Web page with a browser, something 
a reader of a printed page cannot do. The formats in HTML are built so that the functional 
organization of the page is preserved even if a reader changes the appearance of a format. 

For more information, see “Applying paragraph formats” on page 43. 


Preserving a graphical layout on the Web 

If preserving a sophisticated graphic identity or page layout is important, consider creating 
some of your Web pages as Adobe Acrobat® Portable Document Format (PDF) files. PDF files 
preserve the layout and typographical characteristics that are not preserved by HTML, and 
can include hypertext links between pages and to the World Wide Web. 

Adobe SiteMill lets you include PDF files in your Web site and manage links from HTML 
files to them. If you include PDF files, you should provide a link to the free Adobe Acrobat 
Reader application, required to view PDF files. Acrobat Reader can be configured as a 
helper application for browsers, interpreting the PDF format for browsers that do not support 
it directly. Acrobat Reader runs on Macintosh, Windows" 1 , MS-DOS®, and some UNIX® 
systems. For more information about PDF files and Adobe Acrobat, see the Adobe Web 
site at http://wwtv.adobe.com. 

WEB LINKS 

Links are one of the most significant differences between printed pages and Web pages. 

Web pages can contain hypertext links to other Web pages or to other parts of the same page. 
When you click a link, the Web browser takes you to the page set as a destination for the link. 
Links appear as specially marked text or images on the page. In Adobe SiteMill, creating a 
link can be as simple as dragging the icon of a page onto selected text or an image. For more 
information, see Chapter 4, “Creating Links”. 

When you design a Web site, links allow you to create nonsequential arrangements of pages. 
Instead of having one page follow another as in a printed book, several links may be sprinkled 
throughout each page, with each link leading directly to another page containing links to even 
more pages. You can link pages into the most appropriate structure for the information you 
are conveying. 

Links can lead to other pages within your site or to pages on any other Web server in the 
world, giving your readers access to additional information related to the content you are 
presenting. A diagram of the complex link structures that exist on the World Wide Web 
today would in fact resemble a net or web across the world. 
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BUILDING A WEB SITE 

As with any publishing project, planning is important and can save you much time and trou¬ 
ble later. A Web site is structured very differently from printed books and periodicals, and is 
dependent on both local and network hardware and software. Use the following process over¬ 
view to help anticipate questions that may come up as you build your site. 

Set up access to a Web server 

Adobe SiteMill can create, edit, and manage Web pages, but it cannot upload them to the 
server or directly publish the pages on the World Wide Web. Therefore, you should begin by 
knowing where your Web server is, and how you will be expected to deliver the files to it for 
publishing. If you want to use image maps, you must know what kind of server will deliver 
your pages before you begin designing. 

A Web server is a computer equipped with software that can broadcast Web pages over the 
Internet, making the pages available to anyone who connects to the Web server’s address. You 
may have access to a Web server in any of the following ways: 

• Your own computer can be a Web server if it has the proper software and a direct IP 
connection to the Internet, but running a Web server involves a great deal of technical and 
administrative overhead. Most individuals and small companies avoid this labor-intensive 
option and look for someone else to provide Web access to them. 

• You can arrange for an Internet Service Provider (ISP) to publish your Web pages for you. 
An ISP maintains their own server, charging a fee to publish your Web pages. They can also 
provide other kinds of Internet access such as e-mail and Usenet newsgroups. 

• You may work for a company with its own direct Internet connection. Some companies 
allow employees to publish personal Web pages, but many limit personal Web pages to be 
visible only within the company. Contact your company’s Web-server administrator, or 
Webmaster, for more information. 

• You can set up a Macintosh to publish HTML pages over a local area network by giving 
network users access to the HTML files through the Sharing Setup control panel. This 
method does not use the World Wide Web. A reader mounts the host Macintosh on their 
desktop and uses a Web browser to open the home page file stored there, rather than 
connecting to an Internet URL. For example, you can use this method to publish internal 


company materials as a site even if you don’t have access to the World Wide Web. The disad¬ 
vantage is that pages published in this way are not visible over the World Wide Web, and 
features that depend on a true Web server, such as forms and image maps, won’t work. 

A Web server can be on any platform, such as Macintosh, UNIX, or Windows. The server 
platform and location will determine how you will be able to transfer your pages to it. 

For more information, see “Uploading your site to the Web server” on page 113. 

If you are not operating the Web server yourself, talk with the Webmaster to determine how 
the files are to be delivered to the server. For image maps, you will need to ask what kind 
of server it is and how to set up image maps and forms on the server. Once you know this, 
you can begin creating pages with Adobe SiteMill. 

; Sketch the page layouts and site links 

i 

Before you begin producing Web pages, you should have a basic idea of how your pages 
i will look and how they will link together. 

For each page, draw a rough sketch, setting up areas for text and images. Decide where 
you will place links and what elements you’ll provide for navigating among the pages. 

’ For the site as a whole, sketch out the relationships between the pages with a diagram showing 

| how pages link to each other and to pages outside your site. It is also a good idea to come up 

with a logical structure for the names of the files making up your site. 

j 

I 

Organize files and folders on your computer 

* For a Web site to display properly over the World Wide Web, all page files and all of the images 

! used on the pages must be present on the Web server. Therefore, you should ensure that when 

| you upload your site from your computer to the Web server, all the site files transfer together. 

You can keep this process simple by setting up the folders you’ll use to store your pages and 
images before you begin creating pages. 

i Start by creating a folder on your computer that will hold your entire Web site. This is 

known as the site’s local root folder. Create and organize folders that reflect the hierarchy 
you set up when you sketched out the site plan. As you create the new folders, keep them 
all inside the root folder. 
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Set up the default folder for images. When you import PICT images into Adobe SiteMili, they 
are automatically converted into GIF images, and the GIF versions are stored by default in a 
folder you set up from Adobe SiteMili. For more information about setting up the default 
images folder, see “Converting a PICT file to a GIF file” on page 53. 

Lay out your pages 

Create pages in Adobe SiteMill’s Page window, following the layout sketches you made. 

For more information, see Chapter 3, “Adding Text and Images”. 

Add links 

Following the plan you sketched, add links between pages, and then test the links in 
Preview mode. For more information,.see Chapter 4, “Creating Links”. 

The Preview mode in Adobe SiteMili can test links between the pages within your site, 
but not to external links (such as a site on another server). To test external links, you 
must load the page in a browser connected to the World Wide Web. 

Test links within your Web site 

Before you upload pages to the Web server, make sure there aren’t any broken links among 
your pages. Adobe SiteMili can find and correct broken links within a site quickly and auto¬ 
matically. For more information, see “Maintaining your Web site” on page 103. 

Upload your pages to the file server 

When you have completed and tested your Web pages, upload them to the Web server. The 
way you upload them depends on the type of server you are using and your connection to it. 
For more information, see “Uploading your site to the Web server” on page 113. 

Test the pages by connecting to them from the Web server. If everything works, your pages 
are now available to anyone in the world with a connected Web browser! 


Maintain your Web site 

Most Web sites need periodic maintenance. For example, you may need to rearrange the 
structure of your site as it grows, make corrections to information on the pages, or add, 
delete, or rename files. When you want to update your site, use Adobe SiteMili to make the 
changes to the copy of the site stored on your local computer. Using Adobe SiteMili to update 
your site ensures that all links within your site are maintained as you make changes. 

When you are finished updating your Web site, upload it to the Web server, replacing the old 
version of the site. For more information on making changes to your site, see “Maintaining 
your Web site” on page 103. 

CREATING, SAVING, AND OPENING PAGES 

When you start Adobe SiteMili, you can work with individual Web pages or with an entire 
site. For more information on working with an entire site, see “Maintaining your Web site” 
on page 103. 

Creating a new page 

Choose File > New Page to create a blank page that is ready for you to add text and images. 

Saving a page 

Choose File > Save to save a page. Remember to save your work often. 

To save an existing page with a new name, choose File > Save As. 

Note: If the Web server publishing your files is not a Macintosh, do not use spaces in your 
filenames, and use only the characters A to Z,atoz,0 to 9, and_ (underscore). 

Opening an existing page 

Choose File > Open to open an existing Web page on any volume mounted on your com¬ 
puter. Adobe SiteMili interprets all HTML tags that it understands. If Adobe SiteMili reads 
a tag that it cannot understand, it displays that HTML code as red text on the page. 

Adobe SiteMili may work with some HTML tags differently than other authoring applica¬ 
tions. If you open a page that was not originally created with Adobe SiteMili, save any changes 
you make as a new document and proof it before you save over the original pages. 



You cannot open a page directly over the World Wide Web. If you want to open a page from 
the Web, use a Web browser or a file-transfer utility to download the source HTML code to 
your computer, and then open the downloaded file in Adobe SiteMill. 

VIEWING A PAGE 

You can view a page in Preview mode or Edit mode. 

Preview mode is the default view when you open an existing page. In Preview mode, you view 
an approximation of a page as it appears in a graphical Web browser. You can also test hyper¬ 
text links to other pages within a site. You cannot alter a Web page in Preview mode. A globe 
icon in the upper-right corner of a page indicates Preview mode. 

Note: Adobe SiteMill is not a full Web browser, so you cannot preview links to pages that are not 
on your computer, and you cannot preview scripted interactions with servers. 

Edit mode is the default view when you create a new page. In Edit mode, you can create and 
edit Web pages. The tool bar at the top of the window is active in Edit mode. A pen-and-paper 
icon in the upper-right corner of a page indicates Edit mode. 

Toolbar inactive 


Globe icon 

Preview mode 


Toolbar active 



Edit mode 


You can switch between Preview and Edit mode at any time. 

To switch between Preview mode and Edit mode: 

Click the icon in the upper-right corner of the page. 



USING THE ATTRIBUTES INSPECTOR 


The Attributes Inspector is a floating palette that provides information on the current page 
or on selected text or an image. It contains three panels which provide controls and options 
for various objects: 

• The Page panel provides options for the current page. 

• The Text panel provides options for selected text, and the URL for linked text or a linked 
image. 

• The Object panel provides options for selected images or form items. 

To change the displayed panel, click on the Page, Text, or Object button. 



Text and Object panels are unavailable when no text, image, or form item is selected. 
The entire Attributes Inspector is inactive when the page is in Preview mode. 

To display the Attributes Inspector: 

Choose Windows > Show Attributes Inspector. 


To enter text in a text box: 

Click in the text box, type the text, and then press Return. 









Chapter 3: Adding Text and Images 


h £ - ext and images are the most basic parts of a Web page, forming the foundation 
; : c i for the links you will add later. This chapter describes adding text and graphics 

i; . - ; '-M to a Web page using the set of tools built into Adobe SiteMill. 

ADDING TEXT 

You can edit text the same way you would in a word processor. In fact, the structure of a Web 
page is similar to that of a one-column document in a word processor. When the page is 
empty, you must begin typing from the top of the page. If text exists on the page, you must 
type within or at the end of the existing text. 

You can add text to a Web page in any of three ways: 

• Type text directly on the page. 

• Copy or cut the text from another application, and then paste it into the page in 
Adobe SiteMill. 

• Drag the text from another application, and then drop it into the page in Adobe SiteMill. 

Note: Drag-and-drop operations between applications require System 7 Pro or later, and the 
other application must support Macintosh Drag Manager. 

When you import text from another application, most character or paragraph formatting is 
not preserved. If you paste RTF-format text, bold and italic type styles will be preserved; 
otherwise the text imports as plain characters. Some special characters, such as most 
ligatures and the ™ (trademark) symbol, will not be preserved. For more information, 
see “Using special characters” on page 52. 
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TIP: The drag-and- 
drop feature isn't 
just for importing. 

You can quickly 
move text around a 
page or between 
pages by selecting it 
and then dragging 
and dropping it. 


To type text directly on a page: 

1 If the page is not in Edit mode, dick the globe icon in the upper-right corner of the 
page window. 


Toolbar active 



Page icon 


2 Click on the page where you want to type text. 

If there is no text where you click, the insertion point appears at the end of the existing text. 

3 Type the text. 


To import text by copying and pasting: 

1 In another application, select the text and choose Edit > Copy. 

2 Switch to a page in Adobe SiteMill. 

3 If the page is not in Edit mode, click the globe icon in the upper-right corner of the 
page window. 

4 Click on the page where you want to import the text. 

5 Choose Edit > Paste. 


To import text by dragging and dropping: 

1 Set up page windows in Adobe SiteMill and an application that supports Macintosh 
Drag Manager so that both are visible. 

2 Make sure the page window in Adobe SiteMill is in Edit mode, 

3 In the other application, select the text. 

4 Drag the text from the other application into the page window in Adobe SiteMill, and then 
position it on the page. 

5 Release the mouse button. 



To delete text or an image: 

1 Select text or an image. 

2 Choose Edit > Clear, or press the Delete key. 

APPLYING PARAGRAPH FORMATS 

Formats provide the primary organizing structure for most HTML pages. You apply different 
formats to parts of a page that serve different functions, such as headings, paragraphs of body 
text, and lists. Applying a format changes an entire paragraph. If you want to change the 
appearance of individual words or characters, apply character styles instead. For more infor¬ 
mation, see “Applying character styles” on page 49. 

Note: When it saves a page as HTML, Adobe SiteMill uses the <BR > tag to end a paragraph. 
This allows you to control spacing between paragraphs for Netscape Navigator by inserting 
additional carriage returns. However, other browsers collapse multiple carriage returns. 

To specify paragraph spacing across most graphical browsers, insert a transparent GIF file 
between paragraphs. 

Paragraph format 

The Paragraph format is a plain format appropriate for body text. You can also apply the 
Paragraph format to remove other paragraph formatting. 

To apply the Paragraph format, click in a paragraph, and then choose Format >Paragraph. 

Note: Applying Paragraph format will not remove applied character styles. You must remove 
character styles separately. For more information, see '‘Applying character styles ” on page 49. 

Indent formats 

The Indent Left format removes space from the margins on both sides of the text. The Indent 
Right format adds space to the margins. The actual amount of the indent depends on the 
browser used to view the page. Some browsers may not indent at all. 

To increase the indent amount, click in a paragraph, and then choose Format > Indent Right. 






To decrease the indent amount, click in a paragraph, and then choose Format > Indent Left. 



Bottom paragraph indented right. 

Heading formats 

Use headings to organize text on a page. Adobe SiteMill supports the six levels of headings 
available in HTML 2.0. Heading sizes are relative, because the actual display size depends on 
the browser used to view the page. In general, use the largest size as the main heading on the 
page and use the other sizes for subheadings. 

To format a paragraph as a heading: 

1 Click in a paragraph. 

2 Choose Format > Heading, and then choose a heading size. 



Largest heading 
Larger heading 


iANNUALS 


Smaller heading 
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Preformatted format 


The Preformatted format applies a monospaced, or fixed-width, font to selected paragraphs. 
This preserves the original appearance of text when its formatting, such as column alignment 
and line breaks, only works when each character takes up the same space on a line. Tables 
from some spreadsheet applications, such as a financial report from an older mainframe 
computer, may not align properly with the Paragraph format, because most browsers display 
the Paragraph format using more typographically sophisticated fonts where each letter has a 
unique width. 

Note: When you apply other formats, browsers collapse multiple spaces and Return characters 
into a single space. The Preformatted format retains all of the original spaces and line breaks. 
Browsers typically display Preformatted format in a monospace font such as Courier. 


To apply the Preformatted format: 

Click in a paragraph, and then choose Format > Preformatted. 
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Paragraph format applied to monospaced Preformatted format applied to table, 

tabular material. 


Address format 

The Address format is useful for formatting the e-mail or postal address or the telephone 
number of the Web page author. In Adobe SiteMill, the address appears in italics. The actual 
appearance depends on the browser. 


To apply the Address format: 

Click in a paragraph, and then choose Format > Address. 
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List formats 

The List formats manage different kinds of lists. Some List formats can number or bullet 
listed items automatically. The actual appearance of a list depends on the browser. Five kinds 
of list formats are available: 

« The Bullet and Directory list formats convert selected paragraphs into an indented, 
bulleted list. The bullets are added automatically. 

• The Menu list format converts selected paragraphs into an indented list without bullets. 

• The Numbered list format converts selected paragraphs into an indented, numbered list. 
Adobe SiteMill inserts number signs next to each item in the list. The correct numbers appear 
when the list is viewed in a browser. 

• The Term and Definition formats are designed to be used together to present glossary 
information. Term positions selected paragraphs flush with the left margin of the page. 
Definition indents the selected paragraphs. 


BULBS 


j.C- 


■ 


lyill _ _ ^ 


EIBi 




Mali 


- - ^ 

j— Definition 


Bulleted list Menu list Numbered list Term and Definition formats 


To apply a Bullet, Directory, Menu, or Numbered list format: 

1 Click in a paragraph. 

2 Choose Format > List, and then choose Bullet, Directory, Menu, or Numbered. 


To apply Term and Definition list formats: 

1 Make sure terms and definitions alternate and are separated by carriage returns. 

2 Click in a term. 

3 Choose Format > List, and then choose Term. 

4 Click in the definition associated with the term you just formatted. 

5 Choose Format > List, and then choose Definition. 

Creating a nested list 

You can create a list containing more than one level, such as an outline. You simply combine 
a list format with indents, Adobe SiteMill automatically applies a different bullet or number¬ 
ing style to each level of a a nested list. 

To create a nested list: 

1 In an existing list, click in the paragraph that you wan t to nest. 

2 Make sure the list format you want is applied to the paragraph. 

3 Choose Format > Indent Right. 

Applying paragraph and list formats using the Attributes Inspector 

The Attributes Inspector is a floating palette that lets you apply many options without going 
to the menus. Paragraph and list formats are also available from the Attributes Inspector. 

To apply a paragraph or list format using the Attributes Inspector: 

1 Click in a paragraph. 

2 In the Attributes Inspector, click the Text button. 







3 Choose a paragraph or list format from the Format pop-up menu. 



Changing paragraph alignment 

Adobe SiteMill provides left and centered paragraph alignment. You can change paragraph 
alignment from the button bar or from the Attributes Inspector. 


To change paragraph alignment using the button bar: 

1 Click in a paragraph. 

2 Click the Left Align or Center Align button on the button bar. 



To change paragraph alignment using the Attributes Inspector: 

1 Click in a paragraph. 

2 In the Attributes Inspector, click the Text button. 

3 Choose a paragraph alignment from the Align pop-up menu. 



APPLYING CHARACTER STYLES 

Character styles provide ways to distinguish individual characters or words on a page. Apply¬ 
ing a format changes only the selected characters. If you want to change the characteristics of 
entire paragraphs, apply paragraph formats instead. For more information, see “Applying 
paragraph formats” on page 43. 

There are two kinds of character styles: physical styles and logical styles: 

• A physical style changes the appearance of selected text in a specific way. Apply a physical 
style when you want the character formatting to be consistent across browsers. For example, 
applying the physical style Italic makes the selected text appear in italics in most browsers. 

• A logical style labels the selected text, and the appearance of the text depends on the way a 
particular browser interprets the label. Apply a logical style when the function of the selected 
text is more important than its specific appearance, or when you want a reader to be able to 
control the appearance of character styles. For example, applying the logical style Emphasis 
lets a browser use its own definition of Emphasis, which could mean italics, an underline, or 
bold text. 

Four physical character styles are available: 

• Plain is a basic style useful for body text. 

• Bold applies a boldface version of a font. 

• Italic applies an italic version of a font. 

• Teletype applies a monospaced font. 






Six logical character styles are available: 

• Emphasis calls attention to the selected text. Many browsers display emphasis with italics. 

• Strong is intended as a more intense emphasis, often displayed with bold text. 


■H 111 I 


• Citation is intended for titles of publications or media, such asabookor videotape. 



• Sample is useful for representing computer status messages. Most browsers display Sample 
style with a monospaced font. 



• Keyboard is useful for representing text to enter into a computer. Most browsers display 
Keyboard style with a monospaced font. 



• Code is useful for representing lines of computer code. Most browsers display Code style 
with a monospaced font. 


• Variable is intended for text that is used as a variable within computer instructions. For 
example, you could apply the Variable style to the phrase “your name” if the reader must 
substitute his or her name in the instructions. 



• Raw HTML is useful for entering tags that are specific to a particular browser or server soft¬ 
ware, or for HTML tags that Adobe SiteMill does not support in this version. You can apply 
the Raw HTML style to tags that Adobe SiteMill does understand, such as <HR> or <BR>, 
but if you do this, the next time you load the page these tags will not appear as raw HTML— 
Adobe SiteMill will interpret the tags instead. No error checks are performed on text marked 
as Raw HTML, so enter tags carefully. 



Some character styles, such as Sample, Keyboard, Code, and Variable, may seem unusually 
technical. This is because the World Wide Web and the HTML language were initially devel¬ 
oped for distributing documentation and reports throughout the scientific and technical 
community, so many of its original functions were designed to serve that audience. 


To apply a character style: 

1 Select a range of text. 

2 Choose a style from the Style menu. 


To apply a character style using the Attributes Inspector: 

1 Select a range of text. 

2 In the Attributes Inspector, click the Text button. 
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3 Click to select the styles you want to apply. To remove all other styles, select Plain. 
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USING SPECIAL CHARACTERS 

You can type special characters (also known as extended characters) the same way you would 
in any other Macintosh application, by using the Option key in combination with other 
keys or by copying and pasting special characters from the Key Caps application that came 
with your Macintosh. Adobe SiteMill automatically converts special characters into the 
ISO Latin-1 encoding supported by HTML 2.0. For more information on entering special 
characters or using the Key Caps application, see the documentation that came with your 
Macintosh. For more information about characters available in the ISO Latin-1 character set, 
see Appendix B, “Resource Guide”. 

Some special characters cannot be represented in the ISO Latin-1 character set. For example, 
the © (copyright) and ® (registered trademark) characters are available, but the ™ (trade¬ 
mark) symbol is not. If you try to enter a special character that HTML does not support, 
Adobe SiteMill will automatically filter it out whether you type it directly on the page or paste 
or drag it in from another application. Adobe SiteMill does not otherwise notify you when a 
character is not supported. 

ADDING IMAGES 

Your Web page can include images. An image must be part of the column of text that makes 
up a Web page, and it will flow with the text as you add and delete text. 

An image on a Web page can be: 

• A static picture that provides visual information. 

• A link to another resource. 

• An image map with multiple links to other resources. 

• A Submit button on a form. 



Images take much longer to download than text, so if you expect your readers to view your 
page over a regular telephone line, minimize the number of large or unnecessary images on 
your pages. If you have many images to display, you can create a page of thumbnails, or small 
versions of each image, and link each thumbnail to a full-size version. A page of thumbnails 
downloads much faster than a page of full-size images, and the reader can still see the full-size 
version of any image by clicking its thumbnail. 

This chapter covers using an image as a static, unlinked picture. For information about using 
images as links, see “Creating a link” on page 70, “Creating an image map” on page 80, and 
“Using an image as a Submit button” on page 101. 

Image formats you can import into Adobe SiteMill 

Web browsers display images saved in Graphics Interchange Format (GIF). Many Web brows¬ 
ers can also display images in Joint Photographies Expert Group (JPEG) format. With Adobe 
SiteMill, you can import GIF, JPEG, and Macintosh Picture (PICT) files directly. Adobe 
SiteMill automatically converts a copy of a PICT file into GIF file. 

GIF can display up to 8 bits of color and is generally useful for non-photographic images with 
a fairly narrow range of color, such as a company logo. JPEG is appropriate for images con¬ 
taining a wide range of color, such as a 24-bit photograph. 

Note: If you want to import many images that are not in GIF, JPEG, or PICT format, you can 
use the Adobe ScreenReady application (available separately) to convert them as a batch into 
PICT graphics that Adobe SiteMill can import and convert directly. This works especially well 
with EPS files. 

Converting a PICT file to a GIF file 

When Adobe SiteMill imports a PICT file, it converts a copy of the PICT into a GIF file, leav¬ 
ing the original intact. Some PICT files may not convert well to a GIF file. If you don’t like the 
way Adobe SiteMill converts a PICT file to a GIF file, try using another program, such as 
Adobe Photoshop®, to convert the PICT file to a GIF or JPEG file before importing. 

The GIF version of the PICT file is stored in a folder called SiteMill Images that you set up 
using the Preferences command, ideally before you import any images. Copies are saved as 
Imagen.gif (Imagel.gif, Image2.gif, etc.). The Web page links to the GIF copy, not the PICT 
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original. Setting up the SiteMill Images folder properly ensures that all converted and linked 
images will be in one place. For these reasons, the SiteMill Images folder should be inside the 
local root folder of your Web site. 

To set up the default folder for images: 

1 In Adobe SiteMill, choose Edit > Preferences. 

2 Click the Default Folder for Images folder icon. 

3 Locate and open a folder inside the local root folder for the site. 

4 Click In Here. 

Importing an image 

Adobe SiteMill offers several ways for you to add images to your Web page. You can choose 
from the following methods: 

• Drag and drop an image from the Finder, another application, another page, the Site 
window, or the Pasteboard. You can drag and drop images from Adobe Photoshop 3.0.4 or 
later directly into Adobe SiteMill. 

Note: Drag-and-drop operations between applications require System 7 Pro or later, and the 
other application must support Macintosh Drag Manager. 

• Copy and paste an image from another page or another application. 

• Use the Insert Image button on the button bar in the Page window. 

• Drag an image icon from an Image window. 

To import an image from another application by dragging and dropping: 

1 Set up a page window in Adobe SiteMill and a window in another application so that both 
are visible. 

2 Make sure the page window in Adobe SiteMill is in Edit mode. 

3 In the other application, select the image. 



4 Drag the image from the other application into the page window in Adobe SiteMill, and 
then position it on the page. 



5 Release the mouse button. 

Note: When dragging a multilayered image file from Adobe Photoshop 3.0.4, only the active layer 
is dragged. If you want to import all layers, flatten the layers first. 

To drag an image to and from pages, the Site window, or the Pasteboard in Adobe SiteMill:. 

1 Make sure both windows are visible and that any page windows are in Edit mode. 

2 If the Pasteboard is not visible, choose Window > Show Pasteboard. 

3 Drag the image from its original window, and then position it in the window where you 
want to add it. 

4 Release the mouse button. 

To import an image by cutting and pasting: 

1 In another application, select the image and choose Edit > Copy. 

Note: If you are using Adobe Illustrator 3.x or later, you must convert Illustrator paths into a 
PICT image by pressing X+Option+C instead of choosing Edit> Copy. 

2 Switch to a page in Adobe SiteMill. 
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3 If the page is not in Edit mode, click the globe icon in the upper-right corner of the page 
window. 

4 Click on the page where you want to import the image. 

5 Choose Edit > Paste. 



To import an image using the Insert Image button: 

1 Make sure the page is in Edit mode. 

2 Click the Insert Image button in the button bar. 

3 Locate the image you want to add, and then click Open. 

To import an image visible in an Image or Site window: 

1 Make sure both windows are visible and that the page window is in Edit mode. 

2 Drag the image icon from an Image window, and drop it on the page where you want 
to add it. 



Note: You can use an image from a page in Netscape Navigator by saving it to your hard disk or 
copying it to the Clipboard and then importing it into your Adobe SiteMillpage. Be sure you have 
the rights to use the graphics. For more information about saving graphics in Netscape Navigator, 
see the Netscape Navigator documentation. 


FINDING A MISSING IMAGE 

If you preview a page and you see an icon with a question mark where an image should be, 
the image cannot be found on disk. The missing-image icon also displays the path of the 
image it is looking for. For example, this situation can occur if you deleted or moved an image 
on your computer. 

If you want to correct all missing images in the Web site at once, load the site and correct 
errors in the Errors window. For more information, see “Loading a site for maintenance” on 
page 104, and “Correctinglink errors”on page 111. 



Missing-image icon 


To find a missing image: 

1 Double-click the missing-image icon. 

2 Locate the image, and then click OK. 

MAKING PART OF AN IMAGE TRANSPARENT 

If an image is a GIF file, you can make parts of it transparent. With GIF files, you create trans¬ 
parency by selecting one color in the image and making it transparent. This technique is fre¬ 
quently used to make the image background transparent. If you use a single image file more 
than once in your site, all instances of the image use the same transparency settings as the 
original image file. 

A GIF file does not lose color information when you make an image transparent, so you can 
change the transparency setting again at any time. For example, if you made the red areas of 
an image transparent and later decide to make the green areas transparent instead, the origi¬ 
nal red color information reappears when you change the transparency setting. 







Preparing an image for transparency 

Before you import the image into Adobe SiteMill, prepare the image in another program by 
applying one specific color to all the areas you want to be transparent. The transparency color 
you choose must not be used in the parts of the image that you want visible. 

You can specify only one transparency color per image. For example, if you use slightly dif¬ 
ferent shades of green to mark transparency, you will only be able to make one of those shades 
of green transparent, and the other shades will remain opaque and green. For this reason, you 
may not want to antialias the outside edges of a GIF image to a white background, because 
the antialiased edge will contain variations on the background color which will not be trans¬ 
parent, creating an unwanted halo against the page color or the background pattern. 

To make part of an image transparent: 

1 On a page in Adobe SiteMill, double-click an image to open it in an Image window. 

2 Select the transparency tool and click the image on the background color. 


Original background Transparency applied 

3 Choose File > Save. 

4 Close the Image window. 

To change a transparent area back into an opaque area: 

1 On a page in Adobe SiteMill, double-click an image to open it in the Image window. 

2 Select the transparency tool and click on the transparent area. 




ADDING A TEXT LABEL TO AN IMAGE 


You can attach an text label to an image. In a Web browser, the text label appears in place of 
the image as an alternate way to identify it when image display is turned off or when a browser 
does not support graphics. 


To add a text label to an image: 

1 Select the image. 

2 In the Attributes Inspector, click the Image button. 



Image label 

3 In the Alt text box, type a label and then press Return. 


CHANGING THE SIZE OF AN IMAGE 

You can set an image to a size other than its original dimensions. An image can be resized 
visually or by specifying values by pixel dimensions or by a percentage of the height or width 
of the browser window size. You can maintain the horizontal or vertical proportions of the 
image as you resize it. 

Resizing an image in Adobe SiteMill always overrides the default image size, even after you 
change the image dimensions in another application. For example: 

• If you resize an image in the image-editing application but not in Adobe SiteMill, the 
updated image appears at the new dimensions saved from the image-editing application. 

• If you resize an image in Adobe SiteMill before resizing it in the image-editing application, 
the updated image will appear at the same dimensions as before. Adobe SiteMill will stretch 
the image to fit the size you specified on the page. 












If you want to be able to quickly update the size of an image that appears on many pages, do 
not resize it in Adobe SiteMill. This way, resizing the original image in an image-editing appli¬ 
cation updates all instances of the image at once. 

Note: You cannot make images download faster by reducing their size in Adobe SiteMill because 
the application does not resample images you resize. To make images download faster you must 
resample them in an image-editing application such as Adobe Photoshop before importing them 
into Adobe SiteMill. 

To change the size of an image visually: 

1 Select the image. 

2 Drag one of the handles on the edge of the image: 

• The handle on the right edge resizes the horizontal dimension only. 

• The handle on the bottom edge resizes the vertical dimension only. 

• The handle on the bottom-right corner resizes both dimensions freely. 

• To constrain the original image proportions, press and hold Shift as you drag the bottom- 
right corner handle. 



Original size 


Image resized 


To resize an image numerically: 

1 Select the image. 

2 In the Attributes Inspector, dick the Image button. 

3 In the Width or Height option, choose a unit of measure from the pop-up menu: 

• Pixels measures dimensions in screen pixels on the page. 

• Percentage is related to the window size. 100% width or height equals the width or height 
of the window. The image will automatically resize in proportion to the size of the browser 
window displaying it. For example, this is useful when you want an banner image to always 
span the full width of a browser window. 

4 Type new dimensions as follows: 

• To enter a vertical dimension and maintain the original proportions, click to select Scale to 
Width, and then type a dimension in the Height option. 

• To enter a horizontal dimension and maintain the original proportions, click to select Scale 
to Height, and then type a dimension in the Width option. 

• To resize the image freely, do not select Scale to Height or Scale to Width, and then type 
dimensions into the Width and Height options. 

• To resize the image to its original size, click to select Scale to Height and Scale to Width. 



5 Press Return. 

ALIGNING AN IMAGE WITH TEXT 

If you position an image within a line of text and the image is taller than the text, the image 
will increase the line spacing in that line of text. You can align the top, center, or bottom of 
the image with the text. 
















ADDING TEXT AND IMAGES 

To align an image with text: 

1 Select the image. 

2 Click the Top, Center, or Bottom Alignment button near the left side of the button bar. 


Top image alignment 

r Center image alignment 
r- Bottom image alignment 



Note: HTML does not support text wrap. 



ADDING A BORDER TO AN IMAGE 

You can add a border to an image. A border always appears around the rectangular edge of 
the image, regardless of the shapes in the image. A border is always the same color as the 
unlinked text on the page. For more information about the text color, see “Changing text, 
page background, and link colors” on page 64. 

In many browsers, linked images and image maps are marked with a two-pixel border. This 
convention can affect how you use borders with linked and unlinked images: 

• If you add a border to an unlinked image and you do not want it to be visually mistaken 
for a linked image, you may want to specify a border width other than 2. 

• If you remove a border from a linked image or image map, design the image so that a reader 
can tell that it is clickable and linked. 


To add or remove an image border: 

1 Select the image. 

2 In the Attributes Inspector, click the Image button. 

3 Type a number into the Border option, or type 0 to remove an existing border. 


4 Press Return. 



Border value 5 applied 


MAKING AN IMAGE STATIC OR INTERACTIVE 

You can change the behavior of an image so that it acts as a picture, a Submit button on a 
form, or an image map. If you set an image to be a form button or an image map, additional 
setup is necessary. For more information, see “Using an image as a Submit button” on page 
101, or “Creating an image map” on page 80. 

If you just want to link an image to a URL, do not use this procedure. Instead, see “Linking 
to existing text or an image” on page 71. 


To change image behavior: 

1 Select the image. 

2 In the Attributes Inspector, click the Image button. 

3 Click Picture, Button, or Map. 



Image behavior options 






















CREATING AN INTERLACED IMAGE 

If your image is a GIF file, you can save it so it downloads in layers producing a venetian-blind 
effect, rather than downloading each line in sequence. At first, the image looks coarse; as each 
layer is added, it becomes sharper until it reaches its full resolution. This can provide an 
interesting effect and prevent having undesirable empty areas of a page while the reader waits 
for a large image to download. Web browsers that do not support interlacing can still display 
interlaced GIFs, but without the interlacing effect. 

You cannot preview the interlaced effect in Adobe SiteMill. To see the interlaced effect, you 
must load the page in a Web browser that supports interlaced GIF files. 



To create an interlaced image: 

1 Double-click an image on a page. 

2 In the Image window, dick the interlace toggle icon. The icon changes to a striped 
appearance to indicate interlacing. 

3 Choose File > Save. 


4 Close the Image window. 


CHANGING TEXT, PAGE BACKGROUND, AND LINK COLORS 

You can set the color of all nonlinked text on a page. You can also set the colors for the active, 
normal, and visited links on the page, and the page background. These color options are 
visible only on Netscape-compatible browsers. 
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To set text and link colors: 

1 In the Attributes Inspector, click the Page button. 

2 Choose Custom from any of the pop-up menus, depending on which characteristic you 
want to modify: 

• Text specifies the color of normal, unlinked text. 

• Bkgnd specifies the color of the page background. 



• Normal specifies the color of a link that the reader has not yet seen. 

• Active specifies the color of a link as the reader clicks it. 

• Visited specifies the color of links that the reader has recently seen. 

3 In the Apple Color Picker dialog box, set a text color, and then click OK. 

USING AN IMAGE AS A PAGE BACKGROUND 

You can use an image as the background pattern for a page. If your page is viewed by a Web 
browser that supports Netscape backgrounds, the browser will tile , or repeat, the pattern 
behind the text and graphics on the page. You can use any image that Adobe SiteMill 
can import. For more information, see “Image formats you can import into Adobe SiteMill” 
on page 53. 

A background image can add personality to a page, but it can also detract from the effective¬ 
ness of a page if used improperly. When creating a background image you should keep in 
mind the following: 

• Minimize the level of contrast and color saturation in the background image. An intensely 
colored or visually busy background can make the text on top of it difficult to read. 

• Use a small image that downloads quickly to the reader’s computer. 

Note: If you are using System 7.1 you cannot drag an image into Adobe SiteMill. Instead, use the 
Insert Graphic button to add the image to the page, and then drag it into the Attribute Inspector. 

To add a page background using the Attributes Inspector: 

1 In the Attributes Inspector, click the Page button. 

2 Drag an image from one of the following sources: 

• The Finder (requires System 7 Pro or later) 

• Another application (requires System 7 Pro or later) 

• An image file icon in the Site window 






3 Drop the image into the background-image well on the right side of the 
Attributes Inspector. 


Background image weii 
Remove background image icon 

To add a page background from the Image window: 

1 Double-click an image on a page in Adobe SiteMill. 

2 Drag the image icon from the Image window. 

3 Drop the image icon on top of the page icon in a Page window. 



To remove a background image: 

1 In the Attributes Inspector, click the Page button. 

2 Click the trashcan icon below the background-image well. 

ADDING HORIZONTAL RULES 

Horizontal rules are a useful option for dividing your Web page into sections. You can change 
the size (thickness) and width of a horizontal rule visually or numerically. 

To add a horizontal rule: 

1 Click where you want to insert the rule. 

2 Click the Insert Horizontal Rule button on the button bar. 

To change the dimensions of a rule visually: 

1 Select the rule you want to edit. 

2 Drag one of the handles on the edge of the rule: 

• The handle on the right edge resizes the horizontal dimension only. 

• The handle on the bottom edge resizes the vertical dimension only. 

• The handle on the bottom-right corner resizes both dimensions freely. 

• To resize while keeping the most recent proportions of the rule, press Shift as you drag 
the bottom-right corner handle. 
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To change the dimensions of a rule numerically: 

1 Select the rule you want to edit. 

2 In the Attributes Inspector, click the Object button. 

3 Type new values into the rule options as follows: 

• Size specifies the thickness of a rule in pixels. 

• Width specifies the extent of the rule across a page as a percentage of the default page width. 

Default horizontal rule 
Size 10, width 75% horizontal rule 

4 Press Return. 




Chapter 4: Creating Links 


link takes you from the current page to another location. The destination can be 
somewhere else on the same page, on another page within your Web site, or on a 
page on any other server on the Web. Any text or image on your page can be a link. 
For more general information about links, see “Web links” on page 33. 

You can also set up an image as an image map where different areas of the image behave as 
active links. For more information, see “Creating an image map” on page 80. 



HOW LINKS APPEAR ON A WEB PAGE 

When you create a text link, it appears in Adobe SiteMill as underlined blue text by default. 
When you link an image, Adobe SiteMill adds a blue border to the image by default. When 
you’re in Preview mode and pass the pointer over a link, the pointer changes to a pointing 
hand. In a Web browser, after you use a link it usually changes color to let you know you’ve 
seen it. However, the actual appearance and pointer behavior for links may vary depending 
on the settings in the Web browser a person uses to view your page. 
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You can set the colors for normal, active, and visited links on Netscape-compatible browsers. 
For more information, see “Changing text, page background, and link colors” on page 64. 










CREATING A LINK 

By default, a link to a page leads to the top of a page. If you want to link to a topic somewhere 
in the middle of a page, create an anchor first, and then link to the anchor. For more 
information, see “Creating an anchor” on page 77. 

How a link finds its destination 

Every link uses a URL, or Uniform Resource Locator, to find the destination of the link. 
Adobe SiteMill lets you create links among the pages and images within your site by simply 
dragging page or image icons. You can create links to pages outside your Web site and to other 
Internet resources by typing a URL directly into Adobe SiteMill. A URL is similar to the 
directory path to a file used in operating systems such as MS-DOS or UNIX. For example, 
a Web page could have a URL such as: 

http://www.company.com/departments/sales/western.html 

You will need to know the URL of a page if you want to link to it, it is outside your site, 
and it is not already listed in the External Resources window for your site. 

Some URLs begin with two periods. For example: 

../listformats.html 

The two dots direct the browser to the folder above the folder containing the page with 
the link. 

The first URL is an example of an absolute URL. An absolute URL will fail if the file it refers 
to is moved to another directory or server, because the URL will no longer match the names 
of the directories where the file is located. The second URL, which is much shorter, is an 
example of a URL that refers to a file relative to the where the URL is used. If you move a 
relative URL to another directory or server the link will still work as long as the file it refers 
to exists one directory up in the hierarchy. For this reason, if you need to move a site between 
your computer and the Web server, relative URLs are more likely to work on both machines. 


Viewing a URL 

You can quickly see the URL for any linked object in the Page window. 
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To see the URL for a link while in Edit mode: 

1 Triple-click the link. 

2 Look at either of the following locations: 

• The Link Location Bar 

• The Location field in the Attributes Inspector 


To see the URL for a link while in Preview mode: 

Move the pointer over the link, and look at the Link Location Bar. 

Linking to existing text or an image 

You can use any of several methods to create links in Adobe SiteMill: 

• Drag a representation of the page, anchor, or image onto text or an image you selected. This 
turns the selection into a link to that object. 

• Type the URL of the link into the Link Location Bar. 

• Type the URL of the link into the Attributes Inspector. 

Each method uses the same basic actions: You specify the text or graphic that will be the link, 
and then you specify the page where the reader will go when they click the link. 

Note: If you are linking to a PDF file, use one of the methods where you type in the URL. 
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To link to a page by dragging-and-dropping: 

1 Open the page where you will create the link. 

2 Open one of the following: "* 

• The Site window, if you loaded the entire site 

• The page you want to link to 

3 Select the text or image from which you want to create a link. 

4 Drag the page icon from the destination page or from the Site window and drop it onto 
the selected text or image. 



Select text in first window ... then drag page icon from second window to create link. 


TIP: If you used the 
Site > Load Site 
command to work 
on your site, all 
of the files in your 
site ate available for 
Unking from the 
Site window. 


To link to a page, image, or anchor by typing a URL into the Link Location Bar: 

1 Select the text or image that you want to become a link. 

2 Click the Link Location Bar at the bottom of the page. 

3 Type the URL of the page, and press Return. 



To link to a page, image, or anchor by typing a URL into the Attributes Inspector: 

1 Select the text or image that you want to become a link. 

2 In the Attributes Inspector, click the Text button. 

3 Click the Location text box and type the URL of the page. 

4 Press Return. 



To test a link: 

1 If the page is not in Preview mode, click the pen-and-paper icon in the upper-right corner 
of the page. 

2 Click the link. 

Note: Adobe SiteMill can only test links to page or image files that are stored either on your 
computer or on a mounted volume. 


Unking to resources other than Web pages 

A URL does not have to begin with http. You can include other URL types supported by 
World Wide Web browsers, such as ftp, gopher, and mailto. For example, if you want to let 
readers of your page send you messages through e-mail, you can use the mailto URL type to 
link to an e-mail address. If the link already exists on a page, you can simply drag it to another 
page. Otherwise, you create a link by typing the URL into the Link Location Bar at the bottom 
of the Page window when text or an image is selected. After you initially create a link to one 
of these resources, when you load the site for maintenance the link will 







appear as an icon you can drag in the External Resources window, so that you can easily use 
it again or update it. Adobe SiteMill supports the following URL types: 

• file:// opens a file on a mounted volume 

• http:// opens a World Wide Web page 

• ftp:// connects to a server using the File Transfer Protocol 

• gopher:// connects to a Gopher server 

• telnet:// connects to a server using Telnet 

• news: connects to a Usenet newsgroup 

• mailto: sends an electronic mail message 

• snews: opens a secure newsgroup connection 

• shttp:// opens a secure World Wide Web connection 

The specific use of URLs is outside the scope of this guide. For more information on other 
sources of information about URLs, see Appendix B. 


To link to a resource other than a Web page: 

1 Select the text or image that you want to become a link. 

2 Click the Link Location Bar at the bottom of the page. 

3 Type the URL of the resource, and press Return. 
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Selecting and moving links 

When you move text or an image that functions as a link, the link goes with the text or image 

To select all text connected by the same link: 

Triple-click linked text. 

To copy and paste linked text or a linked image: 

1 Select linked text or a linked image. 

2 Choose Edit > Copy. 

3 Click where you want to add a link. 

4 Choose Edit > Paste. 

To drag and drop linked text or a linked image: 

1 Select linked text or a linked image. 

2 Drag it to another location on the same page, or to another page. 

Note: You can drag and drop or paste a URL into the Link Location Bar or the Location 
option in the Attributes Inspector. If you are dragging an address from another page, you 
drag the small globe icon for the displayed URL. 
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Creating a link without applying it to a selected object 

You don’t have to attach a new link to existing text or an image. You can create a new link at 
any location on the page. However, when you drag a page, image, or anchor icon and drop it 
in a location other than selected text or a selected image, Adobe SiteMill attempts to insert an 
object at that new location: 

• Dropping an image icon outside a selection inserts the image itself, not a link to it. 

• Dropping an anchor icon outside a selection on the same page only moves the anchor. 

You can override this behavior and add a link without inserting the linked object. 

This technique is useful for linking from an icon or thumbnail version of an image 
to a full-size version of an image. 

When you add a link only, the link appears as the name of the page, image, or icon. The exact 
method you use depends on whether you are creating a link to an anchor or to an image. For 
more information about anchors, see “Creating an anchor” on page 77. 

To link to an anchor on the same page without moving the anchor: 

Hold down the Command key and drag the anchor icon to another location on the page. 
The anchor name appears as the link text. 



CREATING AN ANCHOR 

When you link to a page, a Web browser presents the top of the linked page by default. There 
are times when you may want to link to a topic somewhere in the middle of a page, or 
elsewhere on the same page. In these situations, you can link to an anchor, which is a marked 
location other than the top of a page. 

Anchors are often used to help navigate through long pages. For example, a table of contents 
or a navigation bar at the top of the page can be a list of topics that are linked directly to 
anchors attached to headings throughout the page. 

You can view all of the existing anchors in a site, or drag any anchor to any page, using the 
Site window. For more information, see “Viewing a site” on page 105. 

To create an anchor: 

1 Save your page with an .htm or .html suffix. 

2 Open the page where you want to create an anchor. If necessary, scroll to the part of the 
page where you want the new anchor. 

3 Drag the page icon down to the location where you want the anchor to be. 



To link to an image without inserting the image: 

Hold down the Command key and drag the image or its image icon onto a page. 
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TIP: Use the 
Pasteboard to store 
anchors that you 
use often, or to hold 
an anchor while 
you scroll to an area 
beyond the 
edge of the page. 


To link to an existing anchor beyond the edge of the page: 

1 Select text or an image, and then choose Edit > Copy. 

2 Scroll the page to the anchor you want. If the anchor is not visible, choose 
Edit > Show Anchors. 

3 Click next to the anchor, and then choose Edit > Paste. 

4 Select the object you just pasted, and then drag the anchor onto it. 

5 Choose Edit > Cut. 

6 Scroll the page to the original object you wanted to link. 

7 Select the original object, and then choose Edit > Paste. 
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TIP: You can drag a 
link directly from 
Netscape Navigator. 
Just drag it directly 
from a page into the 
Link Location Bar at 
the bottom of the 
page window, 
and press return. 


Naming an anchor 

You can change the name of an anchor using the Attributes Inspector. However, the change 
will only affect that page and not links to that anchor on other pages. If links to the anchor 
already exist, change the name of the anchor in the Site window. For more information, see 
“Modifying files in the Site window” on page 107, and “Renaming a file” on page 108. 

To change the name of an anchor in the Attributes Inspector: 

1 In the Attributes Inspector, click the Object button. 

2 Type a new Anchor name, and then press Return. 

REMOVING A LINK 


To display anchor icons: 

Choose Edit > Show Anchors. 

Note: Anchors are always hidden in Preview mode. 

To hide anchor icons: 

Choose Edit > Hide Anchors. 

To link to an anchor from a different page; 

1 Select the text that will lead to the anchor. 

2 Open the page containing the anchor. 

3 Drag the anchor icon and drop it onto the selected text on the first page. 

To link to an anchor from the same page: 

1 Select the text that will lead to the anchor. 

2 Scroll to the anchor. 

3 Drag the anchor icon and drop it onto the selected text. If the selected text is beyond the 
edge of the page, drag within the last line of text at the edge of the page (not beyond the edge). 
The page will scroll automatically. 


When you remove a link from text, it appears in the normal text color. When you remove a 
link from an image, it loses the border that indicates a link. 

To remove a link: 

1 Triple-click to select a link attached to text, or select a linked image. 

2 Choose one of the following options: 

• Press Enter to move the pointer to the Link Location Bar, press Delete to clear out the link 
address, and then press Return to complete the action. 

• Click the Link Location Bar, press Delete, and then press Return. 

• Choose Edit > Remove Link. 

KEEPING FREQUENTLY USED LINKS HANDY 

You might find yourself using certain links often. Adobe SiteMill provides several ways to 
keep frequently used links available so you can just drag them onto the pages you create: 

• Create a Web page containing frequently used links. Store it on your computer and 
keep it open as you build a page. If you are using Netscape™, you can copy links right 
out of the Netscape bookmarks file (located in the System Folder:Preferences:Netscape: 
Bookmarks.html). Don’t edit or save the bookmarks file in Adobe SiteMill—just open it and 
copy the links you want into your page. 



• Store frequently used links on the Pasteboard. For example, if you keep a navigation bar on 
the Pasteboard, you can easily insert it in your Web pages as needed, instead of re-creating 
each link in the navigation bar. 


CREATING AN IMAGE MAP 

A single image can contain more than one link. An image with multiple links is called an 
image map. An image map contains hot spots, or regions that link to another page or location 
when clicked. Each hot spot can link to a different location. For example, you can import an 
image to use as a menu bar and create hot spots over each object in the menu bar. Clicking 
an object opens the page linked to that object. 



Hot spot in image map 


Rants Household 



Specifying the server type and site location 

Setting up an image map is more complicated than setting up a simple link. Image map links 
depend on a Common Gateway Interface (CGI) script that is closely tied to the type of server 
that publishes your Web site. CGI is a language that allows communication between a 
Web browser and a Web server. For example, it lets a Web page query a database. The 
proper use of CGI is outside the scope of this guide, but there are many sources for CGI 
information on the World Wide Web. For more information, see Appendix B. You can 
also consult your Webmaster. 

When you set up an image as an image map, Adobe SiteMill creates an image map file that 
describes the hot spots you created. The image map file must contain the server-specific loca¬ 
tions of link destinations. For Adobe SiteMill to create an image map file properly, you must 
specify the following information in Adobe SiteMill before you begin creating an image map: 

• Whether your Web site uses the NCSA or CERN map format 

• The location of your site’s root folder on the Web server 

• The location of the image map file after it is uploaded to the Web server 

You can use the same image and image map file more than once per site or per page, but you 
cannot use more than one image map file per image. 

After you create an image map, you will have to tell the server where it is stored on the server. 
For more information, see "Telling the server where to find the image map” on page 88. 

Your Web server’s administrator can provide this information. 

Note: If you are editing a site directly on the Web server, do not specify Remote Server options. 

To specify the map format: 

1 Choose Edit > Preferences. 

2 Choose a server type from the Map Format pop-up menu. 
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To specify the root location of your site (remote editing only): 

1 Choose Edit > Preferences. 

2 Click to select the Remote Server option, and do the following: 

• Click the Local Root folder icon, and locate the topmost folder containing your site. 

• Type the Remote Root Directory specifying the path to the directory where your site resides 
on the remote server. This is the directory location on the server machine that you use as the 
root directory of your site after you upload it to the server. 
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The local root folder of the site on your computer corresponds to 
the remote root directory of the site on the Web server. 


Adding linked hot spots to an image map 

You use the image window to add hot spots to an image. The image window toolbox contains 
simple drawing tools that you use to draw shapes over the image to define the hot spots. You 
add links to the hot spots the same way you add links to other objects. 


To zoom the image: 

Click the zoom-in or zoom-out icon at the bottom of the toolbar. The current zoom percent¬ 
age is displayed above the zoom icons. 



5096 zoom 25% zoom 

To draw a hot spot: 

1 Open an image in one of the following ways: 

• From a Page window or Site window in Adobe SiteMill, double-click an image. 

• Choose File > Open to open an image stored on your hard drive. 


2 In an Image window, select a rectangle, circle, or polygon tool from the toolbox. 





3 Draw a shape on the image. 

Adobe SiteMill numbers each hot spot as you draw it, with lower-numbered 
hot spots in front. 



4 Choose File > Save. 

When you save the image, Adobe SiteMill also saves a new file containing the hot spot data. 
The data file has the same name as the image plus the extension .map. This file is stored in the 
same folder as the image. 


To select a hot spot: 

Click the arrow tool, and then click a hot spot. Handles appear around the hot spot. 

To move a hot spot: 

Select a hot spot and drag the hot spot. Be careful not to drag the hot spot by its handles. 

To resize a hot spot: 

Select a hot spot and drag any of its handles. 

To delete a hot spot: 

Select a hot spot, and choose Edit > Clear, or press the Delete key. 

Changing the color of a hot spot 

If it’s difficult to see the hot-spot shapes and numbers, you can change their colors to make 
them more visible. Hot spot colors are only visible when you edit an image map in an Image 
window. 

To change the color of a hot spot: 

1 Select a hot spot. 

2 Click the hot-spot color icon and select a color. 

Layering hot spots 

If your hot spots overlap, hot spots in front take precedence over the ones in back. If a reader 
clicks an area of the image covered by two hot spots, the frontmost hot spot is used. The num¬ 
ber next to a hot spot indicates its place in the layer order; lower numbers are closer to the 
front. You can move a hot spot forward or backward in the layer order. 

If your hot spots don’t overlap, you don’t have to worry about layering. 




To change the order in which hot spots are layered: 

1 Select the hot spot. 

2 Click and hold the layering tool, and choose an option from the pop-up menu: 

• Bring To Front moves the selected shape to the top layer. 

• Send To Back moves the selected shape to the bottom layer. 

• Shuffle Forward moves the selected shape forward one layer. 

• Shuffle Back moves the selected shape back one layer. 

Adding a link to a hot spot 

You can add a page, image, or anchor link to a hot spot the same way you add a link to text 
or an image. Choose from the following options: 

• Drag a page icon onto the hot spot. 

• Drag an image icon onto the hot spot. 

• Drag an anchor onto a hot spot. 

• Type the link address into the Link Location Bar at the bottom of the Image window. 
For more information, see “Linking to existing text or an image” on page 71. 


When you add a link, the link appears over the hot spot. If you select a hot spot, the 
link also appears. 



Creating a default link for the rest of the image map 

You can specify a default link to another page so that if readers miss the hot spots, they link 
to a default page. 

To create a default link: 

Do one of the following: 

• Drag a page, image, or anchor icon and drop it anywhere on the image not covered by 
a hot spot. 

• Type a URL into the Link Location Bar at the bottom of the Image window, and 
then press Return. 










Turning off link display 

When you drag a link onto a hot spot, the URL appears over the hot spot. If this creates 
too much visual clutter, you can turn off the link display. 

To turn off link display: 

In the Image window, click the check box icon next to the letter A. 

Marking the image as an image map 

Before you can test the hot-spot links, you must mark the image as an image map. 

To mark the image as an image map: 

1 Click the image to select it. 

2 In the Attributes Inspector, click the Object button. 

3 Click the Map option at the bottom of the Object panel. 



Telling the server where to find the image map 

When you first save the image map, Adobe SiteMill also saves a new file containing the 
hot spot link data. This image map data file has the same name as the image plus the 
extension .map. This data file is stored in the same folder as the image, and saved in 
the format you set in the Preferences dialog box. 

For the image map links to work, you must specify the location where the CGI script and the 
image map data file will be stored on the server. The Web site administrator can provide this 
information, or you may be able to find a page from the same server with an image map that 
works and use its image map pathname. The pathname is server-specific, so you have to enter 
the path for the specific Web server that will publish your site. 


If you are using an NCSA server, you may have to specify the directory containing the script, 
followed by the path to the image map data file, depending on the server software your 
Web server uses. For more information, see Appendix B, “Resource Guide," or consult 
your Webmaster. 

In the following example, cgi-bin/mapscript is the directory and filename, respectively, of the 
CGI script for the image map, and maps/choices.map tells the CGI script which image map 
data file to use. 

http.7Avmv.company.com/cgi-bin/mapscript/maps/choices.map 

If you are using Netsite, the Netscape server, you can specify a relative or absolute path to the 
image map for the image. For example, you could type 

http://mvw.company.com/imagemaps/choices.map 

or 

images/imagemaps/choices.map 

This makes the HTML file independent of the server configuration. For more information, 
see the Netsite server documentation or consult your Webmaster. 

If you are using a CERN server, the server may be any of a variety of configurations. For more 
information, see the documentation for CERN server clickable-image support, or consult 
your Webmaster. 

To enter the image map location: 

1 Select the image. 

2 In the Attributes Inspector, click the Text button. 

3 Type a pathname of the image map into the Location field. 



You can also specify the pathname by selecting the image and typing the pathname in the 
Link Location Bar at the bottom of the page. 









Testing an image map 

You can test an image map at a basic level by switching a page to Preview mode and click the 
image. However, outside of Adobe SiteMili and image map require a true Web server in order 
to function. You cannot test an image map using pages stored on your computer—you must 
upload your site to a Web server. 

If the image map does not work, check to make sure that you have done the following: 

• Specified the correct root folder location, if necessary, and server type in the 
Preferences dialog box. For more information see “Specifying the server type and site loca¬ 
tion” on page 81. 

• Specified the correct image map location for the image in the Attributes Inspector using 
the pathname syntax appropriate for the type of Web server publishing your site. For more 
information see "Telling the server where to fmd the image map” on page 88. 

• Selected the map option in the Object panel of the Attributes Inspector. 
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Chapter 5: Creating Forms 

Web page can function as a form. A form lets the reader type information and send 
it to the Web server, which can store, analyze, or act on the information depending 
on how it is programmed. For example, if you create a Web version of a product 
catalog, you can set up one of your Web pages as an order form so that a customer can order 
your products using the Web. Some other uses for Web forms include the following: 

• Letting a reader specify criteria to use in searching through your database 

• Letting a reader specify settings that customize a Web page specifically for them, such as a 
view of a map customized according to the reader’s preferences 

• Entering a password 

• Getting customer feedback about your product or service 

• Gathering information about your readership, such as age, income, and interests 

Creating a form is more difficult than creating a basic Web page. Setting up the form controls 
and options on the page is easy. To actually do something with the data that the reader enters, 
a form requires a Common Gateway Interface (CGI) script written in a script or program¬ 
ming language such as AppleScript or Perl. 

When the reader presses the button that sends the data to the server, the server processes the 
data according to the script. A script can simply send the contents of the form somewhere, or 
perform more complex tasks, such as collecting the data into a database or generating a new 
page based on the form’s content. In Adobe SiteMili, you can create one form per page. 
Otherwise, the options are limited only by the capabilities of the script programmer and the 
language he or she uses. 

Specific information about programming CGI scripts is outside the scope of this guide, 
but there are many sources for CGI information on the World Wide Web. You can also consult 
your Webmaster for information about CGI script programmers in your area. 
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TIP: If you reuse 
form objects 
frequently, store 
them on the 
Pasteboard. When 
you need them, 
just drag them 
to the page. 
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You can add form objects to a page as easily as you can add text, graphics, or links. Form 
objects are available from the right side of the button bar at the top of a page. 



button field button 

The form objects available from Adobe SiteMill correspond to the form objects available in 
Version 2.0 of HTML. The checkbox, radio button, text area, text field, and pop-up menu 
objects are also standard user-interface objects in the Macintosh and Windows operating 
systems. When you work with standard user interface objects, you need to understand 
the guidelines for their use so that the way you use the object corresponds to readers’ previous 
experiences with them. The following section contains basic descriptions of each object’s 
function. For more information, see a user-interface reference book such as Macintosh 
Human Interface Guidelines, published by Addison Wesley. 

ADDING CHECKBOXES 

Use checkboxes when you want the reader to be able to choose any combination of alterna¬ 
tives, or when an option has only two clear alternatives such as On or Off. You can customize 
each checkbox using the Attributes Inspector. 

To add a checkbox: 

1 Click on the page where you want to add the checkbox. 

2 Click the Checkbox button on the button bar. 

To customize a checkbox: 

1 On the page, click to select a checkbox. 

2 In the Attributes Inspector, click the Object button. 

3 Set attributes as follows: 

• Type a name to tell the form script which checkbox is sending data. You may want to 
change the default name to a name that describes the option it represents. For example, you 
might name a checkbox “Overnight Delivery.” 
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TIP: Another way to 
seta checkbox 
to be selected or 
deselected by default 
is to double-click it 
on the page when 
in Edit mode. 


• Type a value to tell the form script what the checkbox means when it is selected. For 
example, you might give a checkbox named Overnight Delivery a value of “Yes.” 

• Select Checked to tell Adobe SiteMill if you want the checkbox to be selected by default. For 
example, you might decide not to select Checked for a checkbox named Overnight Delivery 
because it is a more expensive option for a customer. 



4 Press Return. 

5 If you changed the name and value of this checkbox, check (or have the script programmer 
check) the new name and value to make sure they match the values for this checkbox in the 
CGI script that interprets the data generated by this form. 


ADDING RADIO BUTTONS 

Use radio buttons when you want the reader to select only one alternative from a group. As 
with a car radio, when you select one radio button, the other buttons in the group become 
deselected. For example, if a question requires a Yes or No answer, radio buttons are an appro¬ 
priate control to collect this information. You can customize each radio button using the 
Attributes Inspector. 

®;yw . .O No 

A radio button group for a Yes/No choice 



To add a radio button group: 

1 Click on the page where you want to add the first radio button. 

2 Click the Radio Button button on the button bar. 

3 Click to select the button. 

4 For each additional button in the group, hold down the Option key and drag an existing 
button to copy it, and drop the copy next to the previous button. 
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To customize a radio button: 

1 On the page, click to select a radio button. 

2 In the Attributes Inspector, click the Object button. 

3 Set attributes as follows: 

• Type a name to tell the form script which radio button group is sending data. You may want 
to change the numbered default name to a name that describes the option it represents. For 
example, you might name a radio button “Colors.” A radio button group is defined by 
buttons with a common name. 

Note: If you want to rename a radio button, rename all buttons in its group with the same name. 
If you rename only one button in a group, it won’t be associated with the rest of the radio button 
group and the group won’t work properly. 

• Type a value to tell the form script what value to send when the radio button is selected. 
For example, you might give a radio button a value of “Blue.” 

• Select Checked if you want the radio button to be selected by default. You can select 
Checked for only one radio button per group, so selecting Checked deselects all other radio 
buttons in the group. 
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4 Press Return. 

5 If you changed the name and value of this radio button, check (or have the script program¬ 
mer check) the new name and value to make sure they match the values for this radio button 
in the CGI script that interprets the data generated by this form. 
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ADDING TEXT FIELDS 

A text field lets a reader type text into a form. You can choose from single-line, password, and 
multiline text fields. All types of text fields can be resized. As a page author, you can type text 
into a text field that will appear by default, guiding the reader. You can also customize a text 
field using the Attributes Inspector. 

Use a single-line text field when you want the reader to enter specific information from a 
range too wide to list using radio buttons, check boxes, or a scrollable list. Good examples are 
names, telephone numbers, and filenames. 



A password field is a special kind of single-line text field. When a reader types text into the 
password field, a series of bullets or asterisks appears instead of the actual text characters, so 
that no one else can see the password being typed. 



A multiline text field, or text area, lets a reader type a long passage of text. A text area can be 
scrolled if the text exceeds the size of the field. 
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To add a single-line, password, or multiline text field: 

1 Click on the page where you want to add the text field. 

2 Type a label for the text field. 
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3 Click the Single Line, Password, or Multiline Text Field button on the button bar. 


- Multiline Text Field 
|- Single Line Field 
- Password Field 
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4 If you entered a single-line or multiline text field and you want to add text that appears by 
default, double-click in the text field and type the text. 


Naming a text field 

You can change the name of a text field. The name isn’t visible to the reader. 

If you change the name, check (or have the script programmer check) to make sure it matches 
the name for this text field in the corresponding CGI script. 


To change the name of a text field; 

1 Select the text field. 

2 In the Attributes Inspector, click the Object button. 

3 Type a new name in the Name text box. 

4 Press Return. 


Resizing a text field 

You can resize text fields visually or by typing new dimensions into the Attributes Inspector. 

To resize a single-line or password text field visually: 

1 Click the text field to select it. 

2 Drag the handle on the edge of the text field. 

' ''- 'I' V 
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To resize a single-line text field numerically: 

1 Select the text field. 

2 In the Attributes Inspector, click the Object button. 

3 Type the horizontal dimension of the text field, measured in monospaced characters, 
into the Size text box. 

4 Press Return. 

To resize a multiline text field visually: 

1 Click the text field to select it. 

2 Drag one of the handles on the edge of the text field: 

• The handle on the right edge resizes the horizontal dimension only. 

• The handle on the bottom edge resizes the vertical dimension only. 

• The handle on the bottom-right corner resizes both dimensions freely. 

• To constrain the original image proportions, press Shift as you drag the bottom-right 
corner handle. 
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To resize a multiline text field numerically: 

1 Select the text field. 

2 If the Attributes Inspector is not visible, choose Windows > Show Attributes Inspector. 

3 Click the Object button. 

4 Type new dimensions as follows: 

• Rows specifies the number of visible rows vertically. 

• Columns specifies the number of monospaced characters visible horizontally. 


5 Press Return. 







ADDING A POP-UP MENU OR LIST-SELECTION FIELD 


Pop-up menus and list-selection fields are two ways to let a reader make a choice from a set 
of alternatives: 

• Use a pop-up menu when you want the reader to choose only one item from a group. 

In this way, a pop-up menu is similar to a radio button group, but a pop-up menu 
takes up less space. 

• Use a list-selection field when you want the reader to choose one or more items from a list. 
However, a list-selection field generally takes up more room than a pop-up menu, and it is 
less intuitive for making multiple selections than a group of checkboxes. 

When you want to create a list-selection field, you create a pop-up menu first, and convert it 
to a list-selection field. 

To add a pop-up menu: 

1 Click on the page where you want to add the pop-up menu or list-selection field. 

2 Type a label for the pop-up menu. 

3 Click the Pop-Up Menu button on the button bar. 

To convert a pop-up menu to a list-selection field, or vice versa: 

1 Double-click the pop-up menu. 

2 Drag the handle at the bottom of the item border as follows: 

• To turn a pop-up menu into a list-selection field, drag down until the field becomes 
the size you want. 

• To turn a list-selection field into a pop-up menu, drag up until only one item shows. 

3 Release the mouse button. 

4 Click outside the pop-up menu or list-selection field. 

To set up the choices in a pop-up menu or list-selection field: 

1 Double-click the pop-up menu or list-selection field. 

2 Choose Edit > Select All. 


3 For each entry, type in the item, and then press Return. 



4 Set up the choice that is selected by default by doing the following: 

• For a pop-up menu, drag the triangle to a menu choice. 

• For a list-selection field, check the box next to an item in the list. 

5 Click outside the pop-up menu or list-selection field. 

To resize a list-selection field visually: 

Click the list-selection field and drag the handle at the bottom of the item border 
until it is the size you want. 



To resize a list-selection field numerically: 

1 Select the pop-up menu or list-selection field. 

2 In the Attributes Inspector, click the Object button. 

3 In the Items Visible option, type the number of items that you want to display in the 
list-selection field. Other items will be hidden until the reader scrolls the field. 



Note: Typing a value of 1 into the Items Visible option converts the field to a pop-up menu. 









To make multiple choices when browsing a list-selection field on the Macintosh: 

1 Click the first selection you want in the list-selection field. 

2 Click the next selection you want, as follows: 

• To include all items between the items you choose, press Shift as you click the next choice. 

• For a discontinuous selection between the items you choose, press Command as you click 
the next choice. 

Note: The keys that allow continuous or discontinuous selection may vary depending on the 
browser and platform used to view the page. If you don’t think your readership will be familiar 
with the conventions of their browser or operating system, consider using checkboxes instead. 

To allow or disallow multiple choices in a pop-up menu or list-selection field: 

1 Select the pop-up menu or list-selection field. 

2 In the Attributes Inspector, click the Object button. 

3 Select or deselect the Allow Multiple Selections option. 

Note: Selecting Allow Multiple Selections for a pop-up menu converts it to a list-selection field. 

ADDING SUBMIT AND RESET BUTTONS 

A Web page form does not send any form information back to the Web server until the reader 
explicitly asks it to. Typically, the reader sends the information by clicking a Submit button. 
Also, typically a reader can clear a form and start over by clicking a Reset button. The exact 
names and appearances of the Submit and Reset buttons are not standard. For example, some 
Web pages use a graphic for a Submit button in order to make it fit the graphic identity of the 
page more effectively. In Adobe SiteMill, use only one Submit button per form. 





To add a Submit or Reset button: 

1 Click on the page where you want to add the button. 

2 Click the Submit Button or Reset Button button on the button bar. 



To change the text inside a Submit or Reset button: 

1 Double-click the button, and then double-click the text inside it. 

2 Type the text you want. The button will resize to accommodate the new label. 

Using an image as a Submit button 

If you want the Submit button to be more visually consistent with the page you are designing, 
you can create an image in another program and use it as a Submit button. This requires a 
CGI script that tells the server that the image should behave as a Submit button when a reader 
clicks it. You or your script programmer must provide the CGI script and the location where 
it is stored on the server. 

To use an image as a Submit button: 

1 Select the image that you want to use as a button. 

2 If the Attributes Inspector is not visible, choose Windows > Show Attributes Inspector. 

3 Click the Object button. 

4 Select the Button option. 

5 Click the Page button. 

G In the Location textbox, type the name of the associated CGI script. 

7 Press Return. 

ASSOCIATING A CGI ACTION SCRIPT WITH A FORM 

When a reader clicks Submit, the browser sends the values of every option and text field on 
the form to the Web server. For every form you create, you or your script programmer must 
provide a script on the server that handles those values. 

For the script to work correctly, the script must recognize the names and values it receives 
from the form objects on your page. Work with the CGI script programmer to make sure that 
the names and values of your form objects are consistent with those in the script. For more 
information about setting up names and values of form objects, see the topics for form 
objects earlier in this chapter. 

Note: Currently, Adobe SiteMill does not support multiple forms (scripts) on a single page. 






To associate the appropriate CGI script with a form: 

1 If the Attributes Inspector is not visible, choose Windows > Show Attributes Inspector. 

2 Click the Page button. 

3 Type the pathname for the CGI script into the Action text box, and then press Return. 



4 In the pop-up menu to the right of the Action option, choose Get or Post. For more 
information about which option to choose, consult with your script programmer. 


Chapter 6: Maintaining and 
Uploading Your Web Site 



our Web site becomes visible to other people only when you upload your Web site’s 
HTML page files to the Web server publishing your site. Before you upload your 
site, use Adobe SiteMill to check for and correct any linking errors among your 


pages. After you upload your site, use Adobe SiteMill to change pages, links, or the structure 


of the site without breaking links. 


MAINTAINING YOUR WEB SITE 

Publishing a Web site can be more like running a radio station than publishing a book— 
many sites change their content regularly. There are several reasons for this: 

• Web pages are easy to change, so readers have a low tolerance for old information. 

• Your site may contain links to pages on sites maintained by other people, who will probably 
change their pages from time to time. When other people remove, rename, or rearrange 
pages, your pages’ links to their pages will break, causing error messages at your links to 
their pages. 

• You may decide to add or rearrange pages as your Web site expands. 

Without Adobe SiteMill, making changes to a site can be tedious and error-prone. For 
example, if you rename a page or image file or move the file to another directory, you must 
change all of the links to that file, which could be anywhere on any page on your site. If you 
overlook a link that needs to be updated, a reader browsing your site will see an error message 
about a broken link. 

Adobe SiteMill contains tools that make it easy to update any file on your Web site. It 
automatically tracks all of your site’s files and helps you update your site completely, quickly, 
and precisely, which dramatically reduces the time it takes for you to test your site. 

Most site maintenance takes place in three windows: 

• The Site window displays the relationships between every file on your Web site, and 
where you can move and rename your files. This window is similar to the Finder, displaying 
a hierarchical view of all files and subfolders within your site. It also displays all incoming 
and outgoing links for any linked file within your site. 

















• The External References window lists all of the URLs to pages outside your site and 
the pages that link to them from within your site. 

• The Errors window lists all broken links within your Web site, and the pages containing 
those links. You can quickly correct any broken link in this window. 

In addition, Adobe SiteMill can compensate for changes you make in the Page and Image 
windows if you open them from the Site window. 

Once you have started creating links, always rename files or move files between folders from 
the Site window. In the Site window, Adobe SiteMill can track changes to your site and can 
make any necessary changes to maintain link integrity throughout the site. If you rename or 
rearrange your site files using the Finder, Adobe SiteMill won’t discover any broken links until 
the next time you load the site for maintenance. 

As you work in the Site, External Reference, or Errors windows, the Save command is unavail¬ 
able because Adobe SiteMill saves site-wide changes as you make them. Changes you make 
in the Page or Image windows, which only affect one file at a time, are saved only when 
you choose File > Save. 

Note: If the only changes you make to a site are to links in the Site, External Reference, or 
Errors windows, Adobe SiteMill changes only URLs, without changing HTML tags or other 
content in the pages. 

LOADING A SITE FOR MAINTENANCE 

When you want to update your Web site, you usually load the entire site. When you 
load a site, Adobe SiteMill quickly analyzes every file in the site for links. When the analysis 
is complete, it displays the Site and Errors windows, after which you may make changes to 
the site. You can also open the External References window. 

All of the files making up your site must be contained within the one root folder for your site 
located on your computer. You load the root folder into Adobe SiteMill. 

You do not have to load the entire site. For example, when you organize a site into several 
folders, you can work on each folder separately. If you load just a subfolder, Adobe SiteMill 
can verify links only for the files within the subfolder. Adobe SiteMill can verify links through¬ 
out a Web site only if you load the root folder for the entire site. 


To load a site: 

1 Choose Site > Load Site. If the command is unavailable, close the Site window. 

2 Locate the root folder of your site. 

3 Click Open. 

To close a site, close the Site window. 

Using Adobe SiteMill with a workgroup 

Use care when more than one person is responsible for maintaining a Web site. If the site is 
stored on a network volume and another person loads a folder while you are working on 
it, the changes both of you make may simultaneously affect the site files on the network 
volume, causing unwanted inconsistencies and errors in the site. If you want to delegate 
site maintenance tasks to different people, we strongly recommend designing the site 
and your production processes accordingly. For example, you might do the following: 

• Design a production process for your workgroup that ensures that only one person 
edits the site at a time 

• Organize each section of your site into folders and make sure each person works on 
a different folder 

VIEWING A SITE 

The Site window resembles a folder window in the Finder and is the primary window 
for managing files within your site. In this window you can perform the following tasks: 

• Sort files by name, kind, or date modified 

• Display subfolders of your site, which you can expand to see the files contained in 
each subfolder 

• Display the anchors for a page 

• Examine the incoming and outgoing links for any linked file 

• Create new folders 

• Rename a file or rearrange files in folders without breaking any links 

• Identify unreferenced files 


Because the Site window can display every file on your site, you can use it as a convenient 
source of icons when you want to create links between pages within your site. 



Identifying icons in the Site window 



You can quickly identify the kinds of objects in your site by their icons: 
An HTML file 
An image 

A script file, such as a CGI file 


o,' 


An anchor 
An Acrobat PDF file 
A miscellaneous file type 
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Modifying files in the Site window 

You can change how the Site window displays the files you want to work with by choosing 
how files are sorted, displaying or hiding folder contents or anchors on a page, creating a new 
folder, or moving files. 


To sort the Site window: 

Click the column heading by which you want to sort the page. 
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To display or hide folder contents: 

Click the triangle to the left of a folder, or double-click the folder icon. 
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To display or hide the anchors a page contains: 

Click the triangle to the left of a page icon. If a page icon has no triangle, the page 
has no anchors. 
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To create a new folder: 

1 If the Site window is not in front, click it. 

2 Choose one of the following options: 

• If you want to create a new folder at the root level of your Web site, make sure nothing 
is selected in the Site window. 

• If you want to create a folder in a subfolder, select any item inside the subfolder where 
you want the new folder to appear. 

3 Choose Site > Create Folder. 

To move a file without breaking its links: 

Drag a file into any existing subfolder in the Site window. Adobe SiteMill updates all instances 
of the file pathname throughout your site. 

Renaming a file 

You can rename any file in the Site window the same way you do in the Finder. The main 
difference is that Adobe SiteMill can maintain link integrity throughout your site by changing 
the links in other pages that lead to the file you are renaming. For example, if you change the 
name of a file from globe.html to world.html in the Site window, Adobe SiteMill can instantly 
change every instance of globe.html to world.html wherever it occurs on your site. 

Note: If the Web server publishing your files is not a Macintosh, do not use spaces in your 
filenames, and use only the characters A toZ, a to z,0 to 9, and_ (underscore). 

To rename a file without breaking its links: 

1 Click the name of a file. 

2 Type the new name. Keep the suffix if the original name used one. 




3 Press Return. 

4 If other files on your site link to the file you are renaming, Adobe SiteMill will ask you 
if it should update the references in the other files to reflect the new filename. Click OK. 

Examining links to and from files 

For any linked files in your site, Adobe SiteMill can display the incoming links, or links leading 
to a file, and the outgoing links, or links within a file that lead to another page. You can open 
any linked file directly from the Site window to edit the file or to see how the link is used. 


To see a list of incoming links to a file: 
Click and hold the Incoming Links button. 
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To see a list of outgoing links from a file: 
Click and hold the Outgoing Links button. 



wwammsm 

■ 

IBb 

pill! 

f. , 

it. ; ..•i.L'x'-'i- 



To open an incoming or outgoing link: 

Click and hold an Incoming or Outgoing Links button, and then choose a file from the Link 
pop-up menu. 
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Identifying unreferenced files 

Adobe SiteMiil displays unreferenced files in the Site window. An unreferenced file contains 
no links leading to other pages, and no other files lead to it. However, it is listed in the Site 
window because it is stored in a folder within your Web site. An unreferenced file appears 
with a red X instead of an Incoming or Outgoing Links button. 



Unreferenced file 


When you see an unreferenced file, you can create a link to or from the file to connect it 
to the rest of your site, or you can remove it from your site so that it does not take up space 
on the Web server. 

Note: You cannot delete files from within Adobe SiteMiil, so if you want to remove an unrefer¬ 
enced file from your site , use the Finder to move it outside your site folder. The change will appear 
in Adobe SiteMiil the next time you load the site. Although you generally should not make 
changes to your site using the Finder, removing an unreferenced file with the Finder will not affect 
your site because it isn't linked to any other files. 

REPLACING A LINK THROUGHOUT A WEB SITE 

Note: You cannot undo link replacement. 

Adobe SiteMiil can replace all instances of a link with another. For example, this is useful 
when you know that a link has changed but you do not know where the link was used, or 
when you used a link in many pages. 

To find and replace all instances of a link: 

1 Choose Site > Replace Links. 

2 Drag the link you want to replace from the Site window or External References window 
into the Find Every Link To option, or type the URL. 

3 Drag the replacement link from the Site window or External References window into the 
And Replace With A Link To option. 
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4 Click Replace All. 

5 Adobe SiteMiil will ask you if it should update the references in the other files to reflect the 
new filename. Click OK. 

CORRECTING LINK ERRORS 

When you load a site and Adobe SiteMiil cannot find a file that a link refers to, it lists the file 
in the Errors window. All broken links within a site are listed in the Errors window in red, 
and you can correct any of them quickly. As you correct errors, they disappear from the Errors 
window. When the Errors window is empty, your site contains no link errors within itself. 



You can sort the files in the Errors window using the same method as in the Site window. 
For more information, see “Modifying files in the Site window’’on page 107. 


To display the Errors window: 

Choose Window > Errors. 

To correct broken links by dragging and dropping: 

1 If the Errors window is not visible, choose Windows > Errors. 

2 If the Site window is not visible, choose the site name from the Window menu. 

3 In the Site window, find the file that will correct the broken link. 
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4 Drag the file from the Site window and drop it on the corresponding filename in the 
Errors window. 



To correct broken links using the standard file dialog box: 

1 If the Errors window is not visible, choose Windows > Errors. 

2 In the Errors window, double-click the broken link. 

3 In the File dialog box, locate the file that will correct the broken link, and then 
click Open. 

Correcting errors to files on other Web sites 

In the External References window, Adobe SiteMiil summarizes links to files that are not 
on your computer. However, it cannot resolve those links directly. If a link from one of your 
pages to an external resource creates an error message when you click it in a Web browser, 
you can correct its URL in the External References windo w. Although Adobe SiteMiil cannot 
verify the URL directly, changing it once in this window conveniently updates all of 
the instances of that external URL throughout your site. For example, if a site named 
http://wtw.company.com changes its URL to http://www.corporation.com, you can enter 
the new URL and Adobe SiteMiil will correct all links to that site instantly. 

For more information, see “Linking to resources other than Web pages” on page 73. 


To correct all links to an external resource: 

1 Use a Web browser to determine the correct URL for the broken external link. 

2 In Adobe SiteMiil, choose Site > Load Site and open the folder containing your site. 

3 Choose Windows > External References. 

4 Click the URL of the external resource you want to update. 

5 Type the correct URL, and then press Return. 

6 If more than one file on your site links to the file you are renaming, Adobe SiteMiil will ask 
you if it should update the references in the other files to reflect the new filename. Click OK. 

UPLOADING YOUR SITE TO THE WEB SERVER 

Before you transfer your Web site to a server, be sure every HTML page file, image, and 
subfolder on your site is contained within a single folder on your computer. If you are not 
publishing the files from your own computer or administering the Web server yourself, the 
way you transfer your site to the Web server depends on your relationship to the server: 

• If you are using an Internet Service Provider (ISP), talk with the Webmaster to determine 
how to transfer your pages to the Web server. In most cases, you may have file-transfer 
protocol (FTP) access only, so that you have to use FTP software such as Fetch to transfer 
the files to the server. For more information, see “Making a Fetch file transfer go smoothly” 
on page 114. 

• If you work for a company that gives you file access to its Web server, you may be able to 
mount the server as a networked volume on your computer. This action lets you transfer your 
pages simply by copying them to the server from your desktop computer the way you would 
any other file. Again, consult with your company’s Webmaster to see if you have this option. 

For more information, see “Set up access to a Web server” on page 34. 
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Making a Fetch file transfer go smoothly 

Fetch is a popular FTP file-transfer utility you can use to transfer files to a UNIX-based 
Web server. Fetch is available from the Info-Mac archive mirror sites on the World Wide Web. 
Links to the Info-Mac archives appear on many Web sites that provide information about the 
Macintosh computer. 

Note: Do not confuse Fetch with Adobe Fetclfi. Fetch is an FTP file-transfer utility maintained 
by Dartmouth University. Adobe Fetch is a commercial utility from Adobe Systems’ 1 that catalogs 
files. Fetch and Adobe Fetch have completely different feature sets. 

If you use Fetch to transfer your files to the Web server, the following tips can help the transfer 
go smoothly: 

• Always use Binary mode, not Automatic. If Fetch asks you for the file type, specify 
Raw Binary. 

• Do not include spaces in filenames or characters other than A to Z, a to z, 0 to 9, and 

_ (underscore). If you include spaces, Fetch converts them to underscores. This changes the 
filenames, which breaks all of the links on your site. 

• If you are transferring to a UNIX file server, be aware that UNIX is case-sensitive. 

For example, Test.html and test.html are considered two different filenames. 
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Appendix A: Troubleshooting 

This appendix contains solutions to problems you may encounter when using 
Adobe SiteMill. For last-minute information not included in this book, see the 
ReadMe file installed with the application. 

BEFORE YOU CALL TECHNICAL SUPPORT 

There are several steps you can take before calling technical support to report a problem. 
Performing the following steps can solve many problems and often eliminate the need 
for telephone assistance. 

To solve preliminary problems before calling technical support: 

1 See the ReadMe file installed with the program for last-minute information not included 
in this user guide. 

2 Restart your computer without loading system extensions. To do this, quit all open appli¬ 
cations, hold the Shift key, and choose Special > Restart. When the machine restarts and the 
desktop appears, you can release the Shift key. Finally, see if the problem still exists. 

3 Quit Adobe SiteMill if it is still running. Open the Preferences folder in the System Folder 
and drag the Adobe SiteMill preferences file to the Trash, and see if the problem still exists. 
Restart your computer without loading system extensions and reinstall Adobe SiteMill. Then 
restart with extensions on and see if the problem still exists. 

4 Check Adobe Systems’ World Wide Web site to see if a technical note exists for your 
problem. The address is http://www.adobe.com. 

COMMON PROBLEMS 

Can't select, edit, or drop anything on a page, or Attributes Inspector is inactive 

Make sure the page is in Edit mode rather than Preview mode. If a globe icon appears in the 
upper right corner of the page, the page is in Preview mode; click it to switch to Edit mode. 
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Page icon is blank 

If there is no page icon to the left of the Title field at the top of the page, it means you haven’t 
saved the page. Save the page with an .htm or .html suffix and the icon will appear. 

Attributes Inspector isn't applying or saving changes 

Always press Return after typing a name, location, or value into the Attributes Inspector. 
You do not have to press Return if you click a control or choose from a pop-up menu in 
the Attributes Inspector. 

Unexpected red text on the page 

If you open an HTML file and see a lot of red text, there may be an error in the file, such as 
overlapping tags or illegal usage, or it could be a non-HTML file. If the page otherwise looks 
fine, you can delete the red text, edit the page in Adobe SiteMill, and save a new HTML file. 

Colors in an imported image don't match the original 

Try converting the original CMYK image to RGB using a program such as Adobe 
Photoshop. Preview and adjust the colors, and then import the image into Adobe SiteMill. 

Adobe SiteMill defines color using the RGB color model, because computer monitors and 
GIF files display colors using the RGB model. Applications that define color using the CMYK 
color model are often those designed for printed graphics, such as Adobe Illustrator®. 

When you import an image that was defined using CMYK, Adobe SiteMill converts the 
CMYK values to RGB. Because the CMYK model has a significantly different color range 
compared to the RGB model, conversion between the two can result in color shifts. 

Image map hot spots aren't active 

• In the object panel of the Attributes Inspector, make sure the Behavior option for the image 
is set to Map. 

• If the image map doesn’t work from the server through a browser, check the image map 
location in the object attributes panel of the Attributes Inspector. It should be a correct path 
expressed in the proper syntax for your web server type. 

• Make sure you are previewing your site from a true Web server. Outside of Adobe SiteMill, 
you cannot preview image maps using a browser with files stored on you computer. 


Can't test a link to a page on a remote server 

• Adobe SiteMill is currently not a full Web browser, so you can only test links to files actually 
stored on your computer or Web server. 

• Make sure you did not use UNIX-specific characters in filenames. 

Not enough memory 

• Turn off unnecessary system extensions using an extension manager such as Apple’s 
Extensions Manager (included with System 7.5), drag them to a folder outside the 
System Folder, and restart. 

• Increase the amount of memory Adobe SiteMill uses. In the Finder, select the Adobe 
SiteMill icon and choose File > Get Info. Increase the preferred size and then close the 
Get Info window. 



Appendix B: Resource Guide 

Here are some pointers to useful information about the World Wide Web and HTML. 

Note: URLs listed here were current at the time of publication, but may have changed. You 
can always find current information on a topic by using one of the many search engines available 
on the Web. 

General information about the World Wide Web 

• Everything you ever wanted to know about the Web: 

http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/ 

• Books on the Web: 

http://www.yahoo.com/Business_and_Economy/Products_and_Services/Books/Internet/ 

World_Wide_Web/ 

Some books that may also be helpful: Spinning the Web by Andrew Ford, World Wide Web 
Unleashed , Laura Lemay's Teach YourselfWeb Publishing with HTML in a Week , and the 
HTML Manual of Style. 

• Jon Wiederspan has posted some excellent tutorials on Macintosh and the Web. 

http://www.uwtc.washington.edu/Computing/WWW/Mac/Directory.html 

• For WWW-developer resources, including general information about the Web, 

HTML writing guides, and cross-platform tools: 

http://rashoman.tjp. washington.edu/Computing/WWW/Documentation,html 

Information about HTML 

• Everything you ever wanted to know about HTML (specifications, guides, tutorials). 

http://www.yahoo.com/Computers_and_Internet/Software/Data_Formats/HTML/ 

• HTML version 3 specifications: 

http://www.hp.co.uk/people/dsr/html3/Contents.html 

Note: At publication time, the HTML 3 specification is a proposal only; it is not yet official 




• HTML version 2 specifications: 

http://mvw.w3.org/hypertextAVWW/MarkUp/MarkUp.html 

• Text characters supported in the ISO Latin-I encoding standard: 

http://www.w3.Org/pub/WWW/MarkUp/html-spec/html-spec_9.html#SEC9.7.2 

Information about imagemaps 

• General information: 

http://wmv.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/ 

Programming/Imagemaps/ 

• Lessons on creating imagemaps for Macintosh Web servers: 
http://mvtv.uwtc.washington.edu/Computing/WWW/Lessons/Map.html 

• Lessons on creating imagemaps for NCSA servers: 

http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemapping.html 

• Macintosh image maps processing (MapServe): 

MapServe is a CGI application for processing imagemaps. It uses NCSA-style map-definition 
files to decide how to map user clicks. It also provides a log window to show recent map usage. 
A version is under development that will allow MapServe to be used as an ACTION as well. 
Check the home page maintained by Kelly Campbell (camk@ksu.edu) for instructions about 
the new MapServe mailing list: 

http://mvw.spub.ksu.edu/other/machttp_tools/mapserve/ 

Macintosh CGI Scripts 

• Macintosh CGI scripts (for forms processing, e-mail, database access, file processing, 
imagemaps, etc.): 

http://www.uwtc.washington.edu/Computing/WWW/Mac/CGI.html 
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Netscape 

• Netscape backgrounds: 

http://wmv.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/ 

Programming/Backgrounds/ 

Fetch 

• If you need Fetch to upload your Web site to the server, you can find it in the Macintosh 
Hyperarchive at: 

http://hyperarchive.lcs.mit.edu/HyperArchive.htmI 

In the Hyperarchive, search for Fetch or CompactPro. Fetch is also available at any Info-Mac 
mirror site, which is listed on many Web pages about Macintosh software resources. 




Appendix C: Keyboard Shortcuts 


Adobe SiteMill provides keyboard shortcuts as alternatives to using the mouse. You can find 
most keyboard shortcuts on the menus next to the corresponding command. The following 
shortcuts are not found on the menus. 


Page 


RESULT ACTION 




Pop-up a 


Reset button 


*''HiM&*;** WMM.V 

Control [tf] 

K (ouUo! |.S] 
Control (TF) 


Aligning a paragraph 

RESULT ACTION 

' Align left J£ Control (.,] 

Align center 3? Control Q 


Aligning text to an image 


RESULT ACTION 



Toggle between center and bottom alignment Control (0 



Index 


Adding images 52 
adding text 41 
address 13,45 

Adobe Acrobat PDF files 33,71 

Adobe Fetch, defined 114 

Adobe Illustrator 55 

Adobe Photoshop 55 

alignment. See paragraph alignment. 

See image alignment 
anchors 106 
creating 77 
defined 77 
displaying 78 
hiding 78 

Attributes Inspector 10,39,61,65,73, 
115,116 

background image option 11 
text color option 11 

Bookmarks 79 

Bottom Alignment button 62 

CGI. See Common Gateway Interface 
character styles 49 
Bold 49 
Citation 50 
Code 50 
Emphasis 50 

in the Attributes Inspector 51 
Italic 49 
Plain 49 


Strong 50 
Teletype 49 
Variable 51 
check box 18 
circle tool 83 
Clear command 43 
colors 116 
link 64 

page background 64 
text 11,64 

column alignment 45 
columns 30 

Common Gateway Interface 
action script 101 
and forms 91 
and image maps 88 
defined 81 
scripts 120 

Common Gateway Interface (CGI) 81 
Copy command 42, 55, 75 
copyright 52 
Create Folder 108 

Default folder for images 54 
deleting files 110 
designing a page 30 
drag-and-drop 10,41,42,54, 72 
duplicating 
graphics 8 
objects 8 
text 8 


Edit mode 7 
defined 38 

effects, not supported 29 
electronic mail 34,74 
email. See electronic mail 
errors 111 

to external resources 112 
Errors window 21, 24, 104, 111 
External References window 104 

Fetch 114,121 
File Transfer Protocol 74 
font 32 
font width 32 
formats 43 
Address 45 
Bullet 46 
defined 32 
Definition 47 
Directory 46 
Heading 44 

in Attributes Inspector 47 
Indent 43 
List 46 
Menu 46 
Numbered 46 
Preformatted 45 
Term 47 
forms 

checkboxes 92 
defined 91 


list-selection field 98 
multiline text area 95 
naming a text field 96 
password field 95 
pop-up menu 18,98 
radio buttons 17,93 
Reset button 100 
resizing a text field 96 
Submit button 100 
text fields 16,95 
FTP. See File Transfer Protocol 

GIF. See Graphics Interchange 
Format 

globe icon 7,38 
Gopher 74 

Graphics Interchange Format 36,53, 
57 

Heading command 44 
Horizontal Rule button 16,67 
horizontal rules 15,67 
resizing 68 
hot spots 83 
color 85 
defined 80 
layering 85 
link display 88 

HTML. See Hypertext Markup 
Language 
hypertext 33 

Hypertext Markup Language 
(HTML) 29 

additional information 119 

and layout 30 

and special characters 52 


Image view window 10 
Image window 56 
image map 120 
.map file location 88 
adding 83 
CERN server 89 
default link 87 
defined 80 
hot spots 116 
hotspots 83 
map format 81 
marking as an 88 
NCSA server 89 
Netscape server 89 
Netsite 89 
root location 82 
server type 81 
site location 81 
testing 90 
images 

aligning 61 

antialiasing 58 

as a form button 63 

as a page background 10,65 

as an image map 63 

border 62 

importing 116 

inserting 9 

interlaced 64 

making transparent 10 

positioning 9,31 

resizing an image 59 

text label 59 

zooming 83 


Incoming Links button 21 
Indent Left 44 
Indent Right 43 
Insert Checkbox button 19 
Insert Horizontal Rule button 16 
Insert Image button 9,56 
Insert Pop-up button 19 
Insert Text Field button 17 
inserting images 9 
interlace toggle icon 64 
Internet Service Provider 113 
IP connection 34 
ISO Latin-1 52 

ISP. See Internet Service Provider 
italic 8 

Joint Photographies Expert Group 53 
JPEG. See Joint Photographic Expert 
Group 

Keyboard 50 
keyboard shortcuts 123 

Layout 33 
leading 32 
letter spacing 32 
line breaks 31,32,45 
line length 31 

Link Location Bar 72,74, 79 
linking 
testing 73 

to any place on the page 76 
to existing text or image 71 
to other Web resources 73 


links 33 
appearance 69 
breaking 23 
copying 13 
creating 12—15,26 
fixing 24 

frequently used 79 
incoming 21,109 
outgoing 21,109 
removing 79 
replacing 110 
selecting 8 

selecting and moving 75 
site links 35 
testing 117 
Load Site 20,105 
Local Root folder icon 82 
Locate Missing File dialog box 24 
Location Bar 14 
logical styles, defined 49 

Map format 81 
memory 117 

Middle Alignment button 62 
missing image 57 
monospaced, defined 45 
moving files 25 

Netscape 11,121 
New Page command 37 

Object panel 39 
Open command 5, 37 
outgoing links button 21 
outline 32 


Page attributes 11 
Page icon 116 
Page panel 39 
pages 

creating 37 
opening 37 
saving 37 
structuring 32 
Paragraph spacing 32 
Paragraph 43 
paragraph alignment 48 
paragraph formats. See formats 43 
Paste command 42,56, 75 
Pasteboard 8, 55,80 
PDF files. See Adobe Acrobat PDF 
files 

pen and paper icon 7 
pen-and-paper icon 38 
physical styles 
defined 49 
PICT 36,53 
polygon tool 83 
pop-up menu 18 
Preferences 54 
Preview mode 6, 7 
defined 38 

Radio buttons 17 
Raw HTML 51 
rectangle tool 83 
red text 116 

registered trademark 52 
Remote Root Directory 82 
Remove Link 79 
renaming a file 23, 108 


renaming files 25 
reverse 32 
root folder 
defined 35 

Sample 50 

Save As command 37 
Save command 37 
script 81,91 
shadow 32 

Show Anchors command 78 
Show Attributes Inspector command 
11,39 

Show Pasteboard command 9, 55 
Site window 56,103,105 
create a new folder 108 
icons 106 
links 109 
sort 106 

unreferenced files 110 
viewing folder contents 106 
SiteMill Images folder 53 
special characters 52 
strikethru 32 
subscript 32 
superscript 32 

Tabs 32 
tags 30,51 
Telnet 74 
text 

custom color 11 
deleting 43 
formats 32 
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text entry fields 16,95 
Text panel 39 
Top Alignment button 62 
tracking 32 
trademark 52 
Transparency tool 10,58 
troubleshooting 115 
type size 32 

Uniform Resource Locator 6,70,119 
absolute 70 
relative 70 
types 73 


URL. See Uniform Resource Locator 
Usenet newsgroup 34,74 

Webserver 
access to 34 
defined 34 
platform 35 
Web site 29 
building a 34 
loading 20,104 
maintenance 20-23,103 
uploading to 113 


Webmaster, defined 34 
word spacing 32 
workgroup 105 
World Wide Web 

additional information 119 
defined 29 

X icon 21 
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PHOTOGRAPHY 

CMCD, Inc. (Earth&Ware home page: Hedge clippers, Ladder, Mask, Watering can, 
Wheelbarrow) 

PhotoDisc, Inc. (Earth&Ware home page: Angel, Architectural Element, Artichoke, Grapes, 
Herbs, Lime, Picture frame; Plants.html pages: Fruit, Herbs, Tomato, Pear, Vegetables) 

Vivid Details (Earth&Ware home page: Calla lily) 




Creating Image Maps in SiteMill 1.0 General Information 

This document, and many other technical notes, are available in PDF format. 
Contact Adobe dt11 p : //www■ ad ohe.cnm/S up po r t/22flflffiP, htimih dex. 


What's Covered 



An image map is an inline graphic on a World Wide Web page that has multiple links associated with it. 
Different areas of an image map, called hot spots, have separate hyperlinks assigned. The hot spot clicked on 
image map determines which hyperlink is accessed by a Web browser (e.g., Netscape, Mosaic). 

To create an image map in an HTML document, you create a separate .MAP file containing information abou 
the areas of the image map and their hyperlinks. 

A Web server uses an application or script to access a .MAP file, and instructs browsers to link to a specified 
Uniform Resource Location (URL). Because it is the web server that links hot spots on an image map to a 
URL, an image map's links do not display when previewing an HTML document in a browser. Adobe SiteMil 
1.0 can preview image map links when the HTML documents to which the image map links reside on a local 
volume. 

When creating an image map, the following guidelines ensure your image map works as expected in your 
HTML document published on a Web server. Because of the number of servers and configurations available, 
you need to obtain specific instructions for your Web server from your Internet Service Provider (ISP). 

Contact Your Internet Service Provider 

Your ISP implements image map links in your HTML documents. Before creating an image map, contact you 
ISP to obtain the following information for your Web site: 

- Your ISP's Web server supports image maps. 

- Final URL of your Web site. 

- Image map file type required (i.e., NCSA or CERN). 

- Proper syntax for links to invoke the image map server application on your ISP's Web server 

- Documentation, when available, for configuring an image map to run on then Web server. 

Because each Web server and its implementation of image maps is unique, Adobe cannot provide instructions 
on how to link your map file to the map server. Your ISP should provide you with the command for invoking 
your image map on the Web server, which you enter into SiteMill 1.0's Location field in the Attributes 
Inspector. The command provided by your ISP is similar to a URL, which often begins with the URL of the 
mapserver application and includes additional information (e.g., the path to the map file). When your ISP do< 
not know the syntax for invoking your image map on the Web server, ask for a sample URL of a page on theii 
Web server that contains a working image map. In SiteMill 1.0, copy the syntax of the sample URL by 
choosing View > Source, paste this into the Location field in the Attributes Inspector, then replace the file 
names listed in the copied URL with your own filenames. 

Create a Mirror Folder 

HTML documents include references (i.e. links) to external images. Creating a mirror folder of your final We 
site on a local volume that contains all of your HTML documents and linked images ensures you maintain yoi 
links after you copy your HTML documents and images to the Web server. 
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Specifying Link Preferences in SiteMill 1.0 

SiteMill 1.0 includes preferences options that affect how links behave. Before creating an image map in 
SiteMill, specify link preferences to ensure working links in the Preferences dialog box by choosing Edit > 
Preferences. If you change linking preferences after you create an image map, resave the image map to have 
SiteMill include the new link preferences in the map file. To resave an image map, double-click the image to 
open the Image View window, make a minor change to enable the Save command, then close the Image Viev 
window. SiteMill 1.0’s link preferences include the following options. 

Default Folder for Images 

The Default Folder for Images option enables you to specify the folder SiteMill 1.0 saves images it 
automatically converts. SiteMill 1.0 automatically converts images saved in formats that are incompatible wi 
Web browsers (e.g., inserted PICT images, Scrapbook files, picture clippings) to GIF format. 

Map Format 

Choose the Map Format pop-up menu in SiteMill's Preferences dialog box to specify either the CERN or 
NCSA type of map file that SiteMill 1.0 writes when creating an image map. 

Remote Server Preference 

When editing your HTML documents on a local volume, select the Remote Server preference option in the 
SiteMill's Preferences dialog box, which enables the Local Root Folder and Remote Root Directory options fc 
copying your Web site HTML documents to a remove server when finished. 

Local Root Folder: For image maps to link as expected, specify the location of the root level of your mirror si 
by clicking the folder icon. 

Remote Root Directory: The Remote Root Directory is the root directory on the Web server containing your 
Web site's HTML documents and image files. For image maps to link as expected, enter your Web site's 
remote root directory path, whose pathname begins and ends with a forward slash (/) character, in the Remote 
Root Directory field in SiteMill's Preferences dialog box. Your Web site's remote root directory path is 
commonly the URL of your web server excluding the protocol (http:/) and domain (Avww.name.com/). 

Creating Hot Spots 

To create hot spots on an image in SiteMill 1.0, open the desired image in the Image View window, select a 1 
spot shape tool in the Image View window, then draw the hot spot shape (i.e., rectangle, circle, polygon) on I 
image. After drawing a hot spot shape in the Image View window, you can select, move, and reshape the hot 
spot shape using the pointer tool. SiteMill numbers each hot spot shape you create, using the numbers to creal 
a layering order, where smaller-numbered hot spot shapes are in front of higher-numbered hot spot shapes. 

To change a hot spot shape's color to increase the visibility of the hot spot's shape and number in the Image 
View window, select the desired hot spot shape, click the Hot spot color icon, then select the desired color. 

Layering Overlapping Hot spot Shapes 

When your hot spot shapes overlap, ensure the area clicked links as expected. To correct any unexpected link 
in overlapping hot spot shapes, change the layering order in the Image View window by selecting the layering 
tool, then choosing Bring To Front, Send To Back, Shuffle Forward, or Shuffle Back from the pop-up menu 
until the overlapping hot spot shapes link as expected. 

Adding Links to Hot Spots 

To add a link to a hot spot, drag a page icon, an image icon, or an anchor onto a hot spot, or type the link's U 
into the Link Location Bar in the Image View window and press Enter. You can specify a default link to 
another page when areas are clicked outside of hot spots. After adding a link to a hot spot by dragging a page 
icon, image icon, or anchor onto the hot spot, SiteMill adds a label to the hot spot. To disable link label displ 
deselect the Hot spot label option (i.e., letter "A") in the Image Window. 

Changing an Image to an Image Map 

To change your image to an image map after creating hot spots, select your image in page view, then click M 




in the Attributes Insp._.r palette's Image Attributes panel. 

Save your image map by choosing File > Save. When saving image maps, SiteMill 1.0 creates a map file in ti 
format (i.e., CERN, NCSA) specified in the Preferences dialog box, names the map file using the same name 
as the image with the .MAP extension, and locates the map file in the same folder containing the image. 

Specifying Map Locations for Web Servers 

For image maps to link as expected, specify in your SiteMill document where the Web server can find the 
image. To specify image map locations in SiteMill, enter the information provided by your ISP for invoking 
your image map on the Web server into the Location field in the Attributes Inspector. To enter the pathname t 
the map file on the Web server, select the image and enter the pathname in the Link Location Bar and press 
Enter, or type the pathname in the Location text box in the Text Attributes panel of the Attributes inspector ai 
press Enter. 

After entering the pathname of your map file on the Web server, the path to the map file on the local volume 
displays in the Location field in the Text Attributes Inspector, which enables you to preview your the map file 
links in SiteMill. When saving the map file, SiteMill includes the pathname to the map file on the Web servei 

Examples of Web Server Image Map Pathname Formats 
NCSA 

When using a NCSA server, you need to specify a script name and the map filename. The pathname you entei 
in SiteMill's Location field for NCSA servers follow the "image map-scriptname/mapfile" format. For 
example: 

http://www.school.edu/cgi-bin/imagemap/-newbie/images/sample.map 

note: some seiyice providers will request that relative pathnames be used, if this is the case, the protocol and 
domain name can be dropped, leaving: 

/cgi-bin/imagemap/~newbie/images/sample.map 
as the appropriate URL. 

Where the "image map-scriptname" (e.g.Jittp: //www. school. edu/cgi-bin/imagemap) is the 
location of the image map script, which is commonly located in the server's cgi-bin directory. The "mapfile" 
(i.e., '-newbie/images/sample .map") is the path to the image map you created for a specific image. 

Netscape 

Netsite, the Netscape server, uses the-newbie/images/sample .map" format to specify image maps in 
HTML documents. When using a Netscape server, the pathname is a relative or absolute path to the image m: 
for the image, which enables the HTML document to be independent of the server configuration. 

Further Reading 

Adobe SiteMill Version 1.0 User Manual, Adobe Systems Incorporated, 1995. 

Working With Forms, pp. 80-90. 




